栅格布局的命名(.grid-sXm0eY)规则如下:

  1. 当单元列的宽度为 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 的所有标准栅格布局。可以根据栅格名,搜索复制使用(双击展开代码区域):
    
    
  2. 当单元列的宽度不是 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; }            
    
  3. 可以使用下面的表单来自动生成布局样式:
    请输入布局名称:.grid-(例如:s8m0e9 或 e90s200m0)