CSS常用布局-gird栅格布局

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

前言

Grid 布局也叫网格布局，是一种新的 CSS 布局模型，主要用于将一个页面划分为几个网格，以及定义这些网格的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局

0、Grid布局

Grid 布局和Flex布局有什么区别呢？

注意我有提到Grid 布局是一种唯一的二维布局，这也是Flex布局做不到的一点。 Flex布局只能处理一个维度上的元素布局，将元素排列成一行或者一列。 而Grid 布局能够更为精细地分为任意你想规定的网格区域👇

在Grid 布局中，我们能够通过规定元素所占的具体宽高来自定义布局。

一起循序渐进地了解它的使用吧，由于这块没什么难度更重要的是熟练使用。

在下文代码中我都有相应的注释👇，就不过多讲解了

一、基本使用

	.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-template-columns:repeat(5,1fr)
    .son {
        grid-row-start:1;
        grid-column-start:1
        grid-row-end:2;
        grid-column-end:4;
    }
}

五、命名栅格

.father {
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,[r-start] 1fr [r-end] ) //命名栅格
	gird-template-columns:repeat(5,[c-start] 1fr [c-end] )
    .son {
        grid-row-start:r-start 1;
        grid-column-start:c-start 1
        grid-row-end:r-end 1;
        grid-column-end:c-end 3;
    }
}

六、根据偏移量定位元素

.father {
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,1fr)
	gird-template-columns:repeat(5,1fr)
    .son {
        grid-row-end:span 1; //占一行
        grid-column-end:span 3; //占三列
    }
}

七、元素定位简化操作

.father {
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,1fr)
	gird-template-columns:repeat(5,1fr)
    .son {
        //1.根据编号
        grid-row: 1/2;
        grid-column:1/4; //与下面这种写法预期一致
        //2.根据偏移量
        grid-row:1/span 2;
        grid-column:1/span 4;
        
       // grid-row-start:1;
       // grid-column-start:1
       // grid-row-end:2;
       // grid-column-end:4;
    }
}

八、根据栅格区域部署元素

.father {
	width:500px
	height:500px
	display:gird
	gird-template-rows:repeat(5,[r-start] 1fr [r-end] ) //命名栅格
	gird-template-columns:repeat(5,[c-start] 1fr [c-end] )
    .son {
        grid-area:1/1/2/4
       // grid-row-start:1;
       // grid-column-start:1
       // grid-row-end:2;
       // grid-column-end:4;
    }
}