使用CSS3栅格模式构建出不规则布局

本文链接：https://blog.csdn.net/m0_46995864/article/details/106934540

今天初步学习CSS3的栅格系统，因为之前学过bootstraps4的栅格系统，所以基本概念是一致的，只是语法上的一些区别，做了一些笔记：

不同的栅格定义方式：

每一格尺寸相同适用重复定义

grid-template-rows:repeat(2,50%); //两行各占50%

grid-template-columns:repeat(5,20%); //五列各占20%

按总容器的比例划分（fr）

grid-template-rows:1fr 2fr 3fr; 或 repeat(3,1fr);

grid-template-columns:1fr 2fr 2fr;

规定每一栅格的行间距、列间距

grid-row-gap:10px;

grid-colum-gap:10px; 他们等同于：grid-gap:10px 10px;

接下来我在小米移动端官网发现了一块小型区域很适合栅格系统来完成。

在这里插入图片描述
可以看到这是一个左侧占两行，右侧独占两行的布局。

CSS3：

<style>

		.contained{
			width:400px;
			height:400px;
			border: 1px solid #ccc;
			display: grid;
			grid-template-rows: repeat(2,50%);
			grid-template-columns: repeat(2,50%);	//定义两行两列的栅格容器
			grid-row-gap: 10px;
			grid-column-gap: 10px;	//栅格之间的间距
		}
		.contained div:nth-child(1){
			grid-row-start: 1;
			grid-row-end:3;		//左侧的栅格跨越两行，从第一根行线连接到第三行线
			grid-column-start: 1;
			grid-column-end: 2;	//独占一列
			background-color:red;
		}
		.contained div:nth-child(2){
			background-color:blue;
		}
		.contained div:nth-child(3){
			background-color:green;
		}
	</style>

html:

<body>
	<div class = 'contained'>
		<div>左侧区域1</div>
		<div>右侧区域1</div>
		<div>右侧区域2</div>
		
	</div>
</body>

不得不说，有了栅格系统，做静态布局真的是思路清晰，特别省事。