网格布局之重复轨道

CHH54312024-06-19 19:14

网格布局之重复轨道

欢迎关注：xssy5431 小拾岁月

参考链接：https://mp.weixin.qq.com/s/FQboZRMhdOFWqVDZ5JScDg 点击查看

使用场景

在网页开发中，我们尝尝会遇到宫格布局，比如：3 * 3，4 * 4布局等等。

网格布局中的重复轨道，可以完美解决这种布局问题。

示例代码

html 复制代码

<div class="grid-container" id="grid-box">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>

css 复制代码

.grid-container {
	width: 800px;
	padding: 10px;
	display: inline-grid;
	background-color: aliceblue;
	border: 1px solid white;
	border-radius: 6px;
	grid-template-rows: repeat(3, 100px);
	grid-template-columns: repeat(3, 1fr);
	grid-row-gap: 20px;
	grid-column-gap: 20px;
}

.grid-item {
	background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
	font-size: 30px;
	text-align: center;
}

关键代码

css 复制代码

grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);

代码解释

grid-template-rows: repeat(4, 100px); 表示行重复 4 次，高度为 100px；
grid-template-columns: repeat(3, 1fr) 表示列重复 3 次，宽度平均分配；

页面布局

温馨提示

更多博文，请关注：xssy5431 小拾岁月