CSS Grid 布局

什么是 grid

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。浏览器支持程度查阅。

设为网格布局以后，容器子元素的 float、display: inline-block、display: table-cell、vertical-align 和 column-*等设置都将失效。

css

.box {
  display: grid;
  display: inline-grid; /* 行内元素 */
}

容器的属性

以下属性设置在 grid 布局中的父元素（即设有 display:grid 的元素），用来控制内部子元素的行为。

css

.box {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

grid-template-columns/grid-template-rows 定义每一列的列宽/每一行的行宽
- none 所有的列和其大小都将由 grid-auto-columns 属性隐式的指定。
- fr 表示比例关系,按比例分配剩余的可用空间
- auto 由浏览器自己决定长度
- <length> 非负值的长度大小
- <percentage> 非负值且相对于网格容器的百分比
- repeat(<number>|auto-fill|auto-fit,value) 重复设置。第一个参数是重复次数，第二个参数是重复的值。auto-fill指容纳尽可能多的子元素。
- minmax(min, max) 表示长度范围
column-gap/row-gap/gap 定义列间距/行间距/两者合并简写(<row-gap> <column-gap>,简写若省略第二个值，即表示跟第一个值一样)
- <length> 非负值的长度大小
- <percentage> 非负值列之间的间隔大小
grid-auto-flow 定义子元素排列顺序是先行后列还是先列后行
- row(默认) 先行后列
- column 先列后行
- row dense 先行后列,并且尽量填满空格
- column dense 先列后行,并且尽量填满空格
justify-items/align-items/place-items 定义子元素内容水平位置（左中右）/垂直位置（上中下）/两者合并简写（<align-items> <justify-items>,简写若省略第二个值，即表示跟第一个值一样）
- stretch(默认) 拉伸，占满单元格的整个宽度
- start 对齐单元格的起始边缘
- end 对齐单元格的结束边缘
- center 单元格内部居中
justify-content/align-content/place-content 定义整个内容在容器里的水平位置（左中右）/垂直位置（上中下）/两者合并简写（<align-content> <justify-content>简写若省略第二个值，即表示跟第一个值一样）
- start 对齐容器的起始边框
- end 对齐容器的结束边框
- center 容器内部居中
- stretch 项目大小没有指定时，拉伸占据整个网格容器
- space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
- space-between 项目与项目的间隔相等，项目与容器边框之间没有间隔
- space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
grid-auto-columns/grid-auto-rows 定义浏览器自动创建的多余网格的列宽和行高，取值与grid-template-columns/grid-template-rows相同。
grid-template-areas 定义区域，一个区域由单个或多个单元格组成。如果某些区域不需要利用，则使用"点"（.）表示。
css
```
grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
```
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

容器内子元素的属性

grid-column-start/grid-column-end/grid-row-start/grid-row-end 定义子元素的左边框/右边框/上边框/下边框的网格线。
- <number> 指定第几根网格线
- <网格线名字> 直接指定网格线名字如（区域名-start）
- span <number> 指跨越多少个网格
grid-column/grid-row 分别是grid-column-start,grid-column-end,grid-row-start,grid-row-end的合并简写（<start> / <end>）,斜杠以及后面的部分可以省略，默认跨越一个网格。
grid-area 指定子元素放在哪一个区域。也作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写:grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
justify-self/align-self/place-self定义某个单独的子元素内容水平位置（左中右）/垂直位置（上中下）/两者合并简写（<align-items> <justify-items>,简写若省略第二个值，即表示跟第一个值一样）。
- 用法取值跟justify-items/align-items/place-items一样，只是作用于单个子元素。

参考：CSS Grid 网格布局教程

CSS Grid 布局 ​

什么是 grid ​

容器的属性 ​

容器内子元素的属性 ​

CSS Grid 布局

什么是 grid

容器的属性

容器内子元素的属性