grid布局

容器属性

使用网格布局

/*
	使用网格布局，且容器为块级元素
*/
.container {
  display: grid;
}

/*
	使用网格布局，且容器为行内块元素
*/
.container {
  display: inline-grid;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

设置行列

固定列数

# 6列，分别宽度为100px 20px 80px 100px 20px 80px
grid-template-columns: repeat(2, 100px 20px 80px);

# 3列 平分
grid-template-columns: repeat(3, 1fr);

# 3列 第一列50px 第二三列平分剩余空间 第二列占1份 第三列占2份
grid-template-columns: 50px 1fr 2fr;
1
2
3
4
5
6
7
8

• 未设置行时，自动生成

列数不定

# 每列100px，一行宽度不够，自动换下一行
grid-template-columns: repeat(auto-fill, 100px);
1
2

• auto-fill与auto-fit基本一致
• auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度

多余网格设置宽高

/* 多余行 设置宽 */
grid-auto-columns: 100px;
/* 多余行 设置高 */
grid-auto-rows: 100px;
1
2
3
4

网格线命名

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
1
2

行列间距

row-gap: 10px;
column-gap: 20px;
/* 简写 */
gap: 10px 20px;
1
2
3
4

划分区域

/* 9个区域 a-i */
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
/* 3个区域 a b c */
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
/* 
	6个区域
	点. 表示没有用到该单元格，或者该单元格不属于任何区域
*/
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

排列方向

/* 默认值，先行后列 */
grid-auto-flow: row;

/* 先列后行 */
grid-auto-flow: row;
1
2
3
4
5

（所有）单元格内容对齐方式

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
/* 简写 */
place-items:  ;
1
2
3
4

容器对齐方式

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:  
1
2
3
4

项目属性

项目放置的区域

/* 该单元格放置到区域e */
grid-area: e;

/* 坐标(1,2)到(3,4)的区域 */
grid-area: 1/2/3/4;
1
2
3
4
5

（单个）单元格内容对齐方式

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
/* 简写 */
place-self:  ;
1
2
3
4