网格系统

简介

网格系统用于通过一系列的行与格子的组合创建页面布局，分单行和多行形式。

• 网格系统容器样式为.grid；
• 网格系统采用CSS3的flex方式布局；
• 单行为所有格子在一行内显示，格子数量不受限制，单元格元素样式为.x，表示为水平方向的格子；
• 多行形式将一行分为12个单元格，样式分别从.x1至.x12，当一行内的格子数量大于12时，则换行显示。
• 如同表格一样，可合并单元格，如.x6则为6个单元格合并成一个。

网格系统如同表格一样，相同的是可以放置很多单元格，不同的是表格不同的行tr的约束，网格系统只要单元格数量加起来在12以内，就显示为一行，超过另起一行显示。

单行布局

单行布局为所有的格子在一行内；如果多行，则需要多个.grid容器或使用下文的多行布局。

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
  

单行多格

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
  

强制换行

在需要换行的单元格后面加上.x100单元格，则强制换行：

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x100"></div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>

    <div class="grid">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x100"></div>
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
  

单列布局

除了水平方向外，框架还定义了纵向单列的布局，需要在.grid的基础上叠加.grid-y样式，同时单元格样式则改为.y。

    <div class="grid grid-y" style="height:300px;">
      <div class="y">.y</div>
      <div class="y">.y</div>
      <div class="y">.y</div>
    </div>
  

多行布局

多行布局为将一行分为12个单元格，样式为.x1至.x12；

• .x1为一个单元格；
• 每个.x1为容器宽的1/12，12个.x1占满整行；
• .x2为2个.x1合并成一个单元格，宽度为容器宽的2/12，.x3至.x12以此类推；
• .x12为12个单元格合并成一个单元格，宽度占满整行；
• 当一行内单元格数值小于等于12时，在一行内显示；
• 当一行内单元格数值大于12时则另起一行显示。

单元网格

    <div class="grid">
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
      <div class="x1">.x1</div>
    </div>
  

合并单元网格

等份网格

    <div class="grid">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x3">.x3</div>
      <div class="x3">.x3</div>
      <div class="x3">.x3</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
    </div>
    <div class="grid">
      <div class="x12">.x12</div>
    </div>
  

网络只能按1,2,3,4,6,12等份排列网格，在应用中也会常用到5等份的，框架特别增加了.x20网格，每格宽为20%，专用于5等份时排列。

不等份排列

不等份为格子不按平均分配，一行内数值在12以内的；

    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x8">.x8</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x6">.x6</div>
      <div class="x3">.x3</div>
    </div>
    <div class="grid">
      <div class="x2">.x2</div>
      <div class="x4">.x4</div>
      <div class="x2">.x2</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x1">.x1</div>
      <div class="x3">.x3</div>
      <div class="x2">.x2</div>
      <div class="x4">.x4</div>
      <div class="x2">.x2</div>
    </div>
  

自动宽

在固定的格子数、.x及.x0，实现宽度自动填充；

    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x">.x</div>
    </div>
    <div class="grid">
      <div class="x">.x</div>
      <div class="x0">.x0</div>
      <div class="x3">.x3</div>
    </div>
  

多行网格

单行数值超过12时，则另起一行显示，形成多行网格：

    <div class="grid">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x9">.x9</div>
      <div class="x12">.x12</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x6">.x6</div>
      <div class="x2">.x2</div>
      <div class="x3">.x3</div>
      <div class="x5">.x5</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
    </div>
  

强制换行

同时也可以用.x100强制换行

    <div class="grid">
      <div class="x1">.x1</div>
      <div class="x2">.x2</div>
      <div class="x3">.x3</div>
      <div class="w100"></div>
      <div class="x4">.x4</div>
      <div class="x5">.x5</div>
      <div class="x6">.x6</div>
    </div>
  

多列布局

在一列内.y的数值在12以内一列，超过12则另起一列；

    <div class="grid grid-y" style="height:300px;">
      <div class="y6">.y6</div>
      <div class="y6">.y6</div>
      <div class="y6">.y6</div>
      <div class="y6">.y6</div>
    </div>
  

在.y的基础上，增加.x样式，可形成多列布局：

    <div class="grid grid-y" style="height:300px;">
      <div class="x3 y6">.x3.y6</div>
      <div class="x3 y6">.x3.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x5 y6">.x5.y6</div>
      <div class="x5 y6">.x5.y6</div>
    </div>
  

自动高

在预设好部份单元格高度的情况下，使用.y及.y0可实现高度自动填充：

    <div class="grid grid-y" style="height:300px;">
      <div class="y3">.y3</div>
      <div class="y">.y</div>
    </div>
    <div class="grid grid-y" style="height:300px;">
      <div class="y">.y</div>
      <div class="y0">.y0</div>
      <div class="y2">.y2</div>
    </div>
  

强制换列

在预设好单元格宽度的情况下，使用.y100可强制换列：

    <div class="grid grid-y" style="height:300px;">
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
      <div class="y100"></div>
      <div class="x4 y6">.x4.y6</div>
      <div class="x4 y6">.x4.y6</div>
    </div>
  

对齐

因网格采用的是flex布局，所以上节弹性布局中的对齐样式，同样可应用在网格系统里。

横向对齐

即为主轴对齐，样式有.flex-start|center|end|between|around。

    <div class="grid flex-center">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
    <div class="grid flex-end">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
    <div class="grid flex-between">
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
      <div class="x2">.x2</div>
    </div>
  

纵向对齐

即为交叉轴对齐，样式有.flex-items-start|center|end|baseline|stretch。

    <div class="grid flex-items-start" style="height:100px;">
      <div class="x">.x</div>
      <div class="x">.x</div>
      <div class="x">.x</div>
    </div>
    <div class="grid flex-items-center" style="height:100px;">
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid flex-items-end" style="height:100px;">
      <div class="x2">.x2</div>
      <div class="x3">.x3</div>
      <div class="x4">.x4</div>
    </div>
  

项目对齐

弹性项目的对齐，即为格子的对齐方式，样式有.flex-self-start|center|end|baseline|stretch。

    <div class="grid" style="height:100px;">
      <div class="x flex-self-start">.x</div>
      <div class="x flex-self-center">.x</div>
      <div class="x flex-self-end">.x</div>
    </div>
  

多行对齐

即在换行的情况下，多轴对齐方式，样式有.flex-content-start|center|end|between|around。

    <div class="grid flex-content-center" style="height:160px;">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x12">.x12</div>
      <div class="x3">.x3</div>
      <div class="x5">.x5</div>
    </div>
    <div class="grid flex-content-between" style="height:160px;">
      <div class="x6">.x6</div>
      <div class="x6">.x6</div>
      <div class="x12">.x12</div>
      <div class="x3">.x3</div>
      <div class="x5">.x5</div>
    </div>
  

排序

单元格按默认的节点排序，如需要改变顺序，可使用.order0-13改变排序，0为排最前面，13为排最后面：

行排序

    <div class="grid">
      <div class="x1 order5">.x1</div>
      <div class="x2 order13">.x2</div>
      <div class="x3 order1">.x3</div>
      <div class="x4 order2">.x4</div>
      <div class="x5 order0">.x5</div>
      <div class="x6 order3">.x6</div>
    </div>
  

列排序

    <div class="grid grid-y">
      <div class="y1 order5">.y1</div>
      <div class="y2 order13">.y2</div>
      <div class="y3 order1">.y3</div>
      <div class="y4 order2">.y4</div>
      <div class="y5 order0">.y5</div>
      <div class="y6 order3">.y6</div>
    </div>
  

水平偏移

单元格叠加.move1-11样式，可以快速实现元素的水平方向偏移：

    <div class="grid">
      <div class="x4 move4">.x4</div>
    </div>
    <div class="grid">
      <div class="x4">.x4</div>
      <div class="x4 move4">.x4</div>
    </div>
    <div class="grid">
      <div class="x3 move3">.x3</div>
      <div class="x3 move3">.x3</div>
    </div>
    <div class="grid">
      <div class="x2">.x2</div>
      <div class="x3 move1">.x3</div>
      <div class="x3">.x3</div>
      <div class="x2 move1">.x2</div>
    </div>
  

自动偏移

配合盒子模型的.margin-left-auto、.margin-center-auto、.margin-right-auto可实现单元格自动偏移。

    <div class="grid">
      <div class="x3 margin-left-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3 margin-center-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3 margin-right-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x3 margin-left-auto">.x3</div>
    </div>
    <div class="grid">
      <div class="x3">.x3</div>
      <div class="x3 margin-center-auto">.x3</div>
      <div class="x3">.x3</div>
    </div>
    <div class="grid">
      <div class="x3 margin-right-auto">.x3</div>
      <div class="x3">.x3</div>
    </div>
  

因margin高不是容器高的百分比，而是宽的，所以无法实现垂直的偏移效果。

内嵌套

内嵌套大单元格内放网格，如同表格里的单元格内放整个表格：

    <div class="grid">
      <div class="x8">
        <div class="grid">
          <div class="x6">.x6</div>
          <div class="x6">.x6</div>
        </div>
        .x8
      </div>
      <div class="x4">.x4</div>
    </div>
    <div class="grid">
      <div class="x6">
        <div class="grid">
          <div class="x4">.x4</div>
          <div class="x8">.x8</div>
        </div>
        .x6
      </div>
      <div class="x6">
        <div class="grid">
          <div class="x3">.x3</div>
          <div class="x4">.x4</div>
          <div class="x5">.x5</div>
        </div>
        .x6
      </div>
    </div>
  

列嵌套

    <div class="grid grid-y" style="height:300px;">
      <div class="y8">
        <div class="grid grid-y">
          <div class="y6">.y6</div>
          <div class="y6">.y6</div>
        </div>
      </div>
      <div class="y4">
        <div class="grid">
          <div class="x4">.x4</div>
          <div class="x8">.x8</div>
        </div>
      </div>
    </div>
  

网格间距

默认的网格之间是没有间距的，可以给单元格的内容加上填充或边距方式获取间距；因此框架定义.grid-大小来处理单元格之间的边距，大小分别为mini、small、middle、big、large五个等级：

.grid网格间距需要包含在.grid-大小上使用；

    <div class="grid-mini">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-small">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-middle">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-big">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-large">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
  

配合容器使用

因边距处理的关系，使用网格间距.grid-大小与容器叠加使用时，建议填充值为1rem，如.container .grid-small或.padding .grid-big样式。

    <div class="grid-mini padding">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-small padding">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-middle padding">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
    <div class="grid-big padding">
      <div class="grid">
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
        <div class="x4">.x4</div>
      </div>
    </div>
    <div class="grid-large padding">
      <div class="grid">
        <div class="x">.x</div>
        <div class="x">.x</div>
        <div class="x">.x</div>
      </div>
    </div>
  

列间距

同样，在列垂直布局的情况下，间距同样适用。

    <div class="grid-middle padding" style="height:300px;">
      <div class="grid">
        <div class="y">.y</div>
        <div class="y">.y</div>
        <div class="y">.y</div>
      </div>
    </div>
  

九宫格

根据网格系统，快速使用行.x和列.y实现九宫格布局实例：

    <div class="grid-big padding">
      <div class="grid">
        <div class="x4">1</div>
        <div class="x4">2</div>
        <div class="x4">3</div>
        <div class="x4">4</div>
        <div class="x4">5</div>
        <div class="x4">6</div>
        <div class="x4">7</div>
        <div class="x4">8</div>
        <div class="x4">9</div>
      </div>
    </div>

    <div class="grid-middle padding">
      <div class="grid grid-y" style="height:300px;">
        <div class="y4">1</div>
        <div class="y4">2</div>
        <div class="y4">3</div>
        <div class="y4">4</div>
        <div class="y4">5</div>
        <div class="y4">6</div>
        <div class="y4">7</div>
        <div class="y4">8</div>
        <div class="y4">9</div>
      </div>
    </div>

    <div class="grid-small padding">
      <div class="grid grid-y" style="height:300px;">
        <div class="w4 y4">1</div>
        <div class="w4 y4">2</div>
        <div class="w4 y4">3</div>
        <div class="w4 y4">4</div>
        <div class="w4 y4">5</div>
        <div class="w4 y4">6</div>
        <div class="w4 y4">7</div>
        <div class="w4 y4">8</div>
        <div class="w4 y4">9</div>
      </div>
    </div>
  

合理使用网格系统，便利网页排版，实现快速布局开发，下一节，我们将实现响应式网格系统，可在不同设备响应显示不同的单元格数量，实现页面的适配。