CSS布局之栅格布局

栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。

跟flex一样，grid由栅格容器(grid container)和栅格项目(grid item)组成。

栅格容器

通过display: grid可以将元素声明为块级栅格容器，通过display: inline-grid可以将元素声明为行内栅格容器。

1. grid属性

grid是一个复合属性，包括grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow六个属性的合并。

1. grid-template-rows属性

grid-template-rows属性，定义每一行的高度。

2. grid-template-columns属性

grid-template-columns属性，定义每一列的宽度。

这两个属性除了可以用合理的长度单位之外，还有一些专用的属性值。
repeat(int,<length>)：重复某个值,第1个参数为重复次数，第2个值为长度
auto-fill: 自动填充
fr: fraction(片段)，表示比例关系
minmax(<length>,<length>): 数字在这两个范围内浮动
auto: 自动计算长度

每个长度之前还可以指定网格线的名字，例如
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

3. grid-template-areas属性

grid-template-areas属性，定义每个单元格所属的区域；

// 以九宫格为例，按行书写
grid-template-areas: "a b c" "d e f" "g h i";

4. grid-auto-rows属性

grid-auto-rows属性，表示自动计算项目的高度。

// 在2*3的容器内，指定某个元素在第4行第2列，此时多出来的单元格高度都为30px
grid-auto-rows: 30px

5. grid-auto-columns属性

grid-auto-columns，表示自动计算项目的宽度。

// // 在2*3的容器内，指定某个元素在第4行第2列，此时多出来的单元格宽度都为30px
grid-auto-columns: 30px

6. grid-auto-flow属性

grid-auto-flow属性，表示自动排序项目的方式。

grid-auto-flow: row | column | row dense | column dense;

7. justify-content属性

justify-content属性，表示容器内容的水平排列方向；

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

8. align-content属性

align-content属性，表示容器内容的垂直排列方向；

align-content: start | end | center | stretch | space-around | space-between | space-evenly; 

9. place-content属性

place-content属性是align-content和justify-content两个属性的合并

place-content: <align-content> <justify-content>

10. justify-items属性

justify-items属性，表示单元格内容的水平对齐方式；

justify-items: start | end | center | stretch;

11. align-items属性

align-items属性，表示单元格内容的垂直对齐方式；

align-items: start | end | center | stretch;

12. place-items属性

place-items属性是align-items和justify-items属性的合并。

place-items: <align-items> <justify-items>;

栅格项目

1. grid-row-start属性
   grid-row-start属性，表示单元格内容的起始栅格线序号；

grid-row-start: <number>；

2. grid-row-end属性
   grid-row-end属性，表示单元格内容的终止栅格线序号；

grid-row-end: <number>；

3. grid-column-start属性
   grid-column-start属性，表示单元格内容的起始栅格线序号；

grid-column-start: <number>；

4. grid-column-end属性
   grid-column-end属性，表示单元格内容的终止栅格线序号；

grid-column-end: <number>；

5. grid-column属性
   grid-column属性是grid-column-start属性和grid-column-end属性的合并；

grid-column: <grid-column-start> <grid-column-end>;

6. grid-row属性
   grid-row属性是grid-row-start属性和grid-row-end属性的合并；

grid-row: <grid-row-start> <grid-row-end>;

7. justify-self属性

justify-self属性，指定单元格内容的水平排列方向；

justify-self: start | end | center | stretch;

8. align-self属性
   align-self属性，指定单元格内容的垂直排列方向；

align-self: start | end | center | stretch;

9. place-self属性

place-self属性是justify-self和align-self属性的合并。

place-self: <align-self> <justify-self>;