css-grid布局

Grid布局

知识点回顾

• gird布局
• grid-template-columns属性
• grid-template-rows属性
• 使用百分比属性定义行高和列宽
• 使用repeat函数简化
• 使用auto-fill 关键字自动填充
• 使用fr关键字定义行高和列宽
• 使用minmax函数定义范围
• 使用auto 关键字自适应布局
• 使用grid-gap设置单元格之间的间距
• 使用grid-template-areas属性自定义网格名称
• 使用grid-auto-flow 属性改变排列顺序
• 使用span关键字改变单元格的位置

grid布局

表现为grid布局

display: grid;

grid-template-columns属性

grid-template-columns属性定义每一列的列宽。

grid-template-columns: 100px 100px 100px;

grid-template-rows属性

grid-template-columns属性定义每一行的行高。

grid-template-columns: 100px 100px 100px;

上述代码的表现方式为:

这样我们就生成了一个网格布局。

使用百分比属性定义行高和列宽

每个单元格占据1/3。

	display: grid;
	grid-template-columns: 33.33% 33.33% 33.33%;
	grid-template-rows: 33.33% 33.33% 33.33%;

使用repeat函数简化

完成上述同样的功能

	display: grid;
	grid-template-columns: repeat(3,33.33%);
	grid-template-rows: repeat(3,33.33%);

使用auto-fill 关键字自动填充

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

{
	grid-template-rows: auto;
	grid-template-columns: repeat(auto-fill, 100px);
}

使用fr关键字定义行高和列宽

fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

{
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
}

使用minmax函数定义范围

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

使用auto 关键字自适应布局

grid-template-columns: 100px auto 100px;

grid-gap设置单元格之间的间距

grid-gap: 20px 20px;
}

使用grid-template-areas属性自定义网格名称

.container {
	display: grid;
	grid-template-columns: repeat(3,100px);
	grid-template-rows: repeat(3,100px);
	grid-template-areas: 'a b c'
		                 'd e f'
	                     'g h i';
}

使用grid-auto-flow 属性改变排列顺序

grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

使用span关键字改变单元格的位置

span表示单元格占据多个格最小单元格的位置，如下a占据2格单元格。

	grid-column: 3 ;
	grid-row: 1 / span 2;
	background-color: mediumblue;