grid布局笔记

容器网格布局：
display: grid
display: inline-grid;

行高和列宽：
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
33.33% 33.33% 33.33%
repeat(3, 33.33%)
repeat(2, 100px 20px 80px)
repeat(auto-fill, 100px)
1fr 1fr
150px 1fr 2fr
1fr 1fr minmax(100px, 1fr)
100px auto 100px

行间距
row-gap: 20px;
列间距
column-gap: 20px;
间距
gap: ; 如：grid-gap: 20px 20px;
省略了第二个值，浏览器认为第二个值等于第一个值

网格线名称
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]
网格布局允许同一根线有多个名字，比如[fifth-line row-5]

区域名称：
grid-template-areas
grid-template-areas: ‘a b c’
‘d e f’
‘g h i’;
grid-template-areas: ‘a a a’
‘b b b’
‘c c c’;
grid-template-areas: “header header header”
“main main sidebar”
“footer footer footer”;
grid-template-areas: ‘a . c’
‘d . f’
‘g . i’;

排列方式：
grid-auto-flow: column;
row [dense]
column [dense]

单元格内容：
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: ; 如果省略第二个值，则浏览器认为与第一个值相等

整个内容区域在容器里面的水平位置
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: ; 如果省略第二个值，浏览器就会假定第二个值等于第一个值

grid-auto-columns grid-auto-rows现有网格的外部的单元格尺寸，写法与grid-template-columns和grid-template-rows完全相同
不指定这两个属性，浏览器完全根据单元格内容的大小决定

例如下面的条目可以超出现有3乘3网格
grid-row-start: 4;
grid-column-start: 2;

grid-auto-columns： 50px;
grid-auto-rows：50px;