grid布局的背景
flex布局在一维方向上比较简单，而grid布局在二维方向上比较方便，它将网页划分成一个个网格。
grid基本语法
Grid布局与Flex布局有一定的相似性，display:grid或者display:inline-grid。即可成为grid布局的container。grid和inline-grid区别在于前者另起一行，后者不重起一行；以及在容器大小上inline-grid的容器宽度会尽力小。
container语法
- grid-template-columns和grid-template-rows:grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。单元格的大小是固定的，但是容器的大小不确定。为了方便表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。使用fr会尽量占满容器
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
如上代码就规定了一个3*3的表格。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
使用方括号，指定每一根网格线的名字，方便以后的引用。
2. grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式grid-gap: <grid-row-gap> <grid-column-gap>;如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。该属性有效解决了平均布局的问题，不在需要负margin的技巧
3. grid-template-areas 属性
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
多个单元格合并成一个区域的写法如下,某些区域不需要利用，则使用"点"（.）表示。
grid-template-areas: "header header header"
"aside main ad"
"footer footer footer";
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end,水平网格线和垂直网格线都有名字
4. grid-auto-columns 属性，grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
container排列语法
- justify-items 属性，justify-items属性设置单元格内容的水平位置（左中右），
- align-items 属性，align-items属性设置单元格内容的垂直位置（上中下）。
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
- justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
例
item语法
- grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性
四条属性指定项目的四个边框，分别定位在哪根网格线。
grid-column 属性，
grid-row 属性
是缩写形式用/隔开 - grid-area属性指定项目放在哪一个区域。
- justify-self 属性，align-self 属性，用来定制item属性
关于border
grid划分表格时划分的是内容区与border无关
gap和空余
gap只在行之间和列之间存在，空余由justify-content和align-content控制
写得太好啦！！>www.ruanyifeng.com/blog/2019/0…
