CSS：网格布局

一、网格布局基本属性

Grid 布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。
采用网格布局的区域，称为容器（container）。容器内部采用网格定位的子元素，称为项目（item）。

//块级元素
div {
  display: grid;
}

//行内元素
div {
  display: inline-grid;
}

设为网格布局以后，容器子元素（项目）以下设置都将失效：

1. float
2. display: inline-block
3. display: table-cell
4. vertical-align
5. column-*
6. clear

二、示例图

2.1 网格线（Grid Lines）

2.2 网格轨道(Grid Track)

2.3 网格单元格(Grid Cell)

2.4 网格区域(Grid Area)

二、容器属性

1.1 属性

1. grid-template-columns（列宽）
2. grid-template-rows（行高）

1.2 关键字

1.2.1 repeat()

repeat()函数，简化重复的值。
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns: repeat(2, 100px 20px 80px);

1.2.2 auto-fill

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

1.2.3 fr 关键字

css fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

fr关键字（fraction的缩写，意为片段）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

1.2.4 auto

由浏览器自己决定长度

grid-template-columns: 100px auto 100px;

1.2.5 网格线的名称

待补充