1、指定容器使用网格布局: display: grid
2、指定容器设为行内元素并使用网格布局: display: inline-grid
3、定义每一列的列宽:grid-template-columns
4、定义每一行的行高:grid-template-row
5、重复赋值:repeat(次数,值)
6、自动填充:如:repeat(auto-fill,30px)
7、比例:fr
(如 grid-template-columns: 1fr 2fr;
意思是容器分为2列,二列的宽度是一列的2倍)
8、长度范围:minmax()
9、自动填充剩余空间(不设置最大值最小值的情况下):auto
10、网格线名称,同一根线可以有多个名称: grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
11、行间距:grid-row-gap
12、列间距:grid-column-gap
13、间距:grid-gap:行间距数值 列间距数值
行间距和列间距数值相同可只写一个值
14、区域:b到h的分别对应七个区域。.
表示第一个区域不用;h表示两个区域合并;每个区域的起始网格线自动命名为区域名-start
,终止网格线自动命名为区域名-end
;
grid-template-areas: '. b c'
'd e f'
'g h h';
15、填充顺序:grid-auto-flow
默认是row
,即先填满第一行再填下一行;也可设置为column
变成先填满第一列再填第二列;row dense
和column dense
表示尽量填满不出现空白
16、单元格内容的水平位置、垂直位置;默认stretch
,即填满整个单元格
justify-items: start | end | center | stretch;/*水平位置*/
align-items: start | end | center | stretch;/*垂直位置*/
place-items: '水平位置' '垂直位置';/*参数相同可只写一个值*/
17、内容块在网格容器的水平位置、垂直位置;默认stretch
,即填满整个单元格
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:'水平位置' '垂直位置';/*参数相同可只写一个值*/
space-around : 单元格两侧的间隔相等,是单元格与容器边框的间隔的两倍。
space-between : 单元格间隔相等,单元格与容器边框之间没有间隔。
space-evenly : 单元格间隔和单元格与容器边框的间隔相等,。
18、指定项目外的单元格属性:grid-auto-columns
,grid-auto-rows
19、合并属性
grid-template: grid-template-columns grid-template-rows grid-template-areas
grid: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow
20、项目根据网格线定位,可使用z-index
grid-column-start:2;
grid-column-end:3;
/*相当于*/
grid-column:2 / 3
grid-row-start:4;
grid-row-end :5;
/*相当于*/
grid-row: 4 / 5
21、指定项目放在哪一个区域: grid-area: a;
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
22、设置单元格内容的水平、垂直位置,只作用于单个项目
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;