CSS Grid布局（又名“网格布局”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。
本篇会从以下几点介绍一些网格布局的基本概念
1.浏览器支持情况
2.属性列表
3.属性使用
浏览器支持情况
pc端浏览器
移动端
就目前而言，网格布局对浏览器版本要求较高，不过我们可以提前学习，毕竟网格布局也是未来页面布局的一种趋势。
基本概念
和flex布局一样 display:grid,是表明当前容器是网格布局的直接父项.
如下，container是网格布局的直接父项，grid-item则是网格布局的直接子项
aaaaa
bbbbb
ccccc
ddddd
eeeee
fffff
Grid属性列表
Grid Container 的全部属性
display
grid-template-columns // 定义网格的列 的名称和大小
grid-template-rows // 定义网格的行 的名称和大小
grid-template-areas
grid-template
grid-column-gap // 指定网格线的大小，也可以理解为设置列之间的间距的宽度。
grid-row-gap // 指定网格线的大小，也可以理解为设置行之间的间距的宽度。
grid-gap // grid-column-gap + grid-row-gap 的缩写
justify-items // 网格内容 沿着`行`轴对齐
align-items // 网格内容 沿着`列`轴对齐
justify-content // 网格容器内的网格的`行`轴对齐方式
align-content // 网格容器内的网格的`列`轴对齐方式
grid-auto-columns // 隐式网格轨道的大小
grid-auto-rows // 隐式网格轨道的大小
grid-auto-flow // grid item 排列方式
grid // 缩写形式，具体看下面内容
Grid Items 的全部属性
grid-column-start // 表示列轴上，grid item的网格线的起始位置，
grid-column-end // 表示列轴上， grid item的网格线的终止位置，
grid-row-start // 表示行轴上，grid item的网格线的起始位置，
grid-row-end // 表示列轴上，grid item的网格线的终止位置，
grid-column // grid-column-start + grid-column-end简写形式。
grid-row // , 和 grid-row-start + grid-row-end 简写形式
grid-area // grid item命名 或 grid-column-start + grid-column-end + grid-row-start + grid-row-end 简写形式
justify-self // 沿着`行`轴对齐grid item 里的内容
align-self // 沿着`列`轴对齐grid item 里的内容
下面我们针对这些属性，一 一 介绍：
Crid 父级项目属性
display
将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。
- grid - 生成一个块级(block-level)网格
- inline-grid - 生成一个行级(inline-level)网格 （与grid在一起， 类似于flex和inline-flex关系）
- subgrid - 如果你的 grid container 本身就是一个 grid item（即,嵌套网格），你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。
.container {
display: grid | inline-grid | subgrid;
}
注：column, float, clear, 以及 vertical-align 对一个 grid container 没有影响
grid-template-columns / grid-template-rows
使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。
1,
非必填项，若为空，则网格线会被自动分配数字名称，即:1,2,3,4...
2,可以有多个名称，具体实例在下面会有说明
.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}
示例如下：
1.网格线未命名
// (如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：
.container {
grid-template-columns: 100px auto 100px;
grid-template-rows: 50% 100px;
}
2.网格线指定确切的命名
注：网格线可以在中括号中指定确切命名，且一个网格线可以有不止一个名字。例如，这里第2条网格线有两个名字：center 和 line2：
.container{
display:grid;
grid-template-columns: [first] 100px [center line2] auto [line3] 100px [end];
grid-template-rows: [row-start] 50% [row-center] 100px [row-end];
}
如果你的定义中包含重复的部分，则可以使用repeat() 符号来简化写法：
// 以下两种写法等价
.container {
grid-template-columns: repeat(3, 20px [col]) 5%;
}
.container {
grid-template-columns: 20px [col] 20px [col] 20px [col] 5%;
}
引申
“fr”单位允许您将轨道大小设置为网格容器自由空间的一部分（亦可理解为，除去所有不可伸缩的 grid item 之后计算得到的权重）
如下，除去第二轨道50px，第一，三四均为 calc( (100% - 50px) / 3 )
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
*grid-gap / grid-column-gap / grid-row-gap *
指定网格线的大小，也可以理解为设置列/行之间的间距的宽度。
grid-gap 是 grid-row-gap 和 grid-column-gap 的缩写
.container {
grid-gap: ;
}
for example
.container {
display:grid;
grid-template-columns: 200px 100px 200px;
grid-template-rows: 120px auto;
grid-gap: 20px 15px;
}
.grid-item{
background:pink;
}
justify-items / align-items
justify-items:沿着
行轴对齐网格内的内容
align-items:沿着列轴对齐网格内的内容
- start: 内容与网格区域的左（顶）端对齐
- end: 内容与网格区域的右（底）端对齐
- center: 内容位于网格区域的中间位置
- stretch: 内容宽度占据整个网格区域空间(这是默认值)
注：也可以通过给单个 grid item 设置align-self属性来达到上述效果。
justify-content
网格容器内的网格的对齐方式
justify-content:行轴
justify-content:列轴
- start - 网格与网格容器的左（顶）边对齐
- end - 网格与网格容器的右（底）边对齐
- center - 网格与网格容器的中间对齐
- stretch - 调整g rid item 的大小，让宽度填充整个网格容器
- space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
- space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
- space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
grid-auto-columns / grid-auto-rows
指定自动生成的网格轨道（又名隐式网格轨道）的大小。 隐式网格轨道在你显式的定位超出指定网格范围的行或列（使用 grid-template-rows/grid-template-columns）时被创建。
example：创建一个3*2的布局
.grid-container {
display:grid;
grid-template-columns: 120px 180px 200px;
grid-template-rows: 120px 120px;
grid-auto-columns: 50px;
grid-auto-rows: 50px;
}
.grid-item{
background:pink;
}
现在指定 .item-b开始于列网格线 5 并结束于在列网格线 6，但事实上我们并未定义列网格线 5 或 6。因为我们引用不存在的网格线，宽度为被定为50px的隐式轨道的就会被创建用与填补间隙。可以使用 grid-auto-columns 和 grid-auto-rows属性来指定这些隐式轨道的宽度：
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
注：若两个grid-item设置的grid-column和 grid-row相同，则后面的会覆盖前面的
grid-auto-flow
如果grid item 并没有知名具体放在哪个网格位置上，则自动放置算法会自动放置这些项目，grid-auto-flow用于控制自动布局算法的工作方式
- row - 告诉自动布局算法依次填充每行，根据需要添加新行
- column - 告诉自动布局算法依次填充每列，根据需要添加新列
- dense - 告诉自动布局算法，如果后面出现较小的 grid item，则尝试在网格中填充空洞
.container {
grid-auto-flow: row | column | row dense | column dense
}
example:定义一个有5列和2行的网格，并将 grid-auto-flow 设置为 row（这也是默认值）
item-a
item-b
item-c
item-d
item-e
item-f
// css
.container {
display:grid;
display: grid;
grid-template-columns: 120px 120px 120px 120px 120px;
grid-template-rows: 60px 60px;
grid-auto-flow: row;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
因为我们将 grid-auto-flow 设置为row，所以剩余没有设置的4个项目（item-b，item-c, item-d, item-f）是在剩余的行水平摆放位置的：
现在将 grid-auto-flow 设置为 column， 则剩余4个项目则会以列的顺序上下摆放：
grid
grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flo的简略写法
.container {
grid: none | / | [ [/ ]];
}
以下代码写法等价
.container {
grid: 200px auto / 1fr auto 1fr;
}
.container {
grid-template-rows: 200px auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: none;
}
grid-item 子级项目属性
grid-column-start / grid-column-end / grid-row-start /grid-row-end
用特定的网格线确定 grid item 在网格内的位置。
grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，
grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。
: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线 - span
: 网格项将跨越指定数量的网格轨道 - span
: 网格项将跨越一些轨道，直到碰到指定命名的网格线 - auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道
.item {
grid-column-start: | | span | span | auto
grid-column-end: | | span | span | auto
grid-row-start: | | span | span | auto
grid-row-end: | | span | span | auto
}
example:
.grid-container {
display:grid;
display: grid;
grid-template-columns: [column-1] 60px [column-2] 120px [column-3] 100px [column-4] 80px [column-5] 120px [column-6] ;
grid-template-rows: [row-start] 60px [row-center] 60px [row-end];
grid-auto-flow: row;
}
.item-a {
grid-column-start: column-2;
grid-column-end: column-4;
grid-row-start: row-start;
grid-row-end: row-end;
}
注意：
1，如果没有声明 grid-column-end / grid-row-end，默认情况下，该网格项将跨越1个轨道。,
2.网格项可以相互重叠。 您可以使用z-index来控制它们的堆叠顺序。
grid-column / grid-row
grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的简写形式。
.item {
grid-column: / | / span ;
grid-row: / | / span ;
}
grid-area
给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。另外也可以做为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写形式。
// 可以是数字，也可以是网格线的名字
.item {
grid-area: | / / / ;
}
example：
给网格命名
.item-a {
grid-area: header
}
作为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写:
.item-a {
grid-area: 1 / col4-start / last-line / 6
}
justify-self / align-self
justify-self: 沿着行轴对齐grid item 里的内容
align-self: 沿着列轴对齐grid item 里的内容
此属性对单个网格项内的内容生效
- start - 将内容对齐到网格区域的左（顶）端
- end - 将内容对齐到网格区域的右（底）端
- center - 将内容对齐到网格区域的中间
- stretch - 填充网格区域的宽度 (这是默认值)
要为网格中的所有grid items 设置对齐方式，也可以通过 justify-items / align-items 属性在网格容器上设置此行为。
参考文章：
# CSS 网格布局学习指南
很多地方参考了饥人谷老师的该篇文章，并做了精简