栅格布局的命名(.grid-sXm0eY)规则如下:
- 当单元列的宽度为 40px 的倍数时,
sX 表示 col-sub 的宽度 = X * 40 - 10,
eY 表示 col-extra 的宽度 = Y * 40 - 10,
m0 表示 col-main 的宽度 = 总宽度 - (X + Y) * 40,
s-m-e 的顺序,表示各列的排列顺序。
比如:总宽为 950px 时,.grid-e6m0s5 表示 col-extra(230) | col-main(510) | col-sub(190).
下面是基于 40px 的所有标准栅格布局。可以根据栅格名,搜索复制使用(双击展开代码区域):
- 当单元列的宽度不是 40px 的倍数时,X 和 Y 直接表示宽度。比如:
总宽为 950px 时,.grid-s120m0e50 表示 col-sub(120) | col-main(760) | col-extra(50), 样式为:
.grid-s120m0e50 .main-wrap { margin: 0 130px 0 60px; }
.grid-s120m0e50 .col-sub { width: 120px; margin-left: -100%; }
.grid-s120m0e50 .col-extra { width: 50px; margin-left: -50px; }
- 可以使用下面的表单来自动生成布局样式: