grid栅格布局使用详解

Gird栅格布局

一、基本使用

	.father{
		height:300px
		width:300px
		//1.父结构声明网格布局
		display:gird
		//2.调整容器中布局方式
		//2.1 按具体占用大小分配
        gird-template-row:100px 150px 50px
		gird-template-columns:50px 150px 100px
		
		//2.2 按占用容器比例分配
		gird-template-row:33% 50% 17%
		gird-template-columns:17% 50% 33%
		
		//2.3.1.1 重复分配-自主规定份数-自主规定大小
		gird-template-row: repeat(2,100px 50px)
		//多个大小单位，重复分配，此时相当于分配了2行宽度为100px的行和2行宽度为50px的行
		gird-template-columns: repeat(2,50%)
		
		//2.3.1.2.1重复分配-自主规定份数-比例分配-等比例分配
		gird-template-row:repeat(5,1fr);
		gird-template-columns:repeat(3,1fr)
		
		//2.3.1.2.2 重复分配-自主规定份数-比列分配-
		gird-template-row:
		gird-template-columns:
		
		//2.3.2 重复分配-自动填充
		gird-template-row:repeat(auto-fill,100px)
		gird-template-columns:repeat(auto-fill,100px)
	}

二、控制栅格大小

.father {
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,minmax(50px,100px))//规定网格大小的最值
	gird-template-columns:repeat(3,minmax(30px,100px))
}

三、设置栅格间距

.father{
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,1fr)
	gird-template-columns:repeat(5,1fr)
	row-gap:10px; //设置行间距
	column-gap:20px; //设置列间距
}

四、根据栅格线编号放置元素

.father {
   
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,1fr)
	gird