网格布局(grid)

网格布局(grid)

容器属性

启动网格布局：display:grid;
			display:inline-grid;
划分列：grid-template-columns:列宽1 列宽2 列宽3...;
划分行：grid-template-row:行高1 行高2 行高3...;
属性值:px % fr auto repeat minmax

功能函数(repeat):

	grid-template-columns:repeat(1,2)
	1:重复次数	2:重复值
	grid-template-columns:repeat(auto-fill,px(或%))
	auto-fill:自动填充

minmax(最小值，最大值)

grid-template-columns:minmax(最小值，最大值)

间距

grid-column-gap:列间距
grid-row-gap:行间距
grid-gap:行间距 列间距
gap:行间距 列间距

分区

grid-template-areas:”分区1 分区2 分区2“
					“分区1 分区4 分区 3”
	【注】需要配合项目属性grid-area:调用分区
grid-template-columns:[线2] 列宽 [线2] 列宽 [线3];
grid-template-rows:[线2] 行高 [线2] 行高 [线3];	
grid-auto-flow:子元素默认排列方式
				column:水平排列
				row:垂直排列

对齐方式

justify-items:网格内容在单元格中水平对齐方式
align-items:网格内容在单元格中垂直对齐方式
place-items:垂直 水平
	start center end stretch
justify-content:网格整体在容器的水平对齐方式
align-content:网格整体在容的垂直对齐方式
place-content:垂直 水平
	start center end stretch 
	space-around space-between space-evenly

项目属性

grid-area:调用分区
grid-column-start:起始列线
grid-column-end:结束列线
grid-row-start:起始行线
grid-row-end:结束行线
grid-row:起始行线/结束航线;
grid-coumn;起始列线/结束列线