Grid布局是什么
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
Grid布局与Flex布局区别
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
Flex效果
Grid效果
基本概念
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
容器属性
- display: grid 定义采用网格结构
- grid-template-columns: 100px 33% 200px 定义每一列的列宽
- grid-template-rows: 100px 33% 200px 定义每一行的行高
- grid-row-gap: 20px: 设置行间距
- grid-column-gap: 20px: 设置列间距
- grid-template-areas: 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。用于定义区域
- grid-auto-flow: 默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"
- justify-items: 设置单元格内容的水平位置（左中右）
- align-items: 设置单元格内容的垂直位置（上中下）
- place-items: 是align-items属性和justify-items属性的合并简写形式
- justify-content: 是整个内容区域在容器里面的水平位置（左中右）
- align-content: 是整个内容区域的垂直位置（上中下）
- grid-auto-columns和grid-auto-rows: 用来设置，浏览器自动创建的多余网格的列宽和行高
项目属性
- grid-column-start：左边框所在的垂直网格线
- grid-column-end：右边框所在的垂直网格线
- grid-row-start：上边框所在的水平网格线
- grid-row-end：下边框所在的水平网格线
- grid-column：是grid-column-start和grid-column-end的合并简写形式
- grid-row：是grid-row-start和grid-row-end的合并简写形式
- grid-area：指定项目放在哪一个区域
- justify-self: 设置单元格内容的水平位置（左中右），只作用于单个项目
- align-self: 设置单元格内容的垂直位置（上中下），只作用于单个项目
- place-self: 上述两个属性的简写
