容器网格布局:
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;