网格布局之重复轨道

欢迎关注：xssy5431 小拾岁月
参考链接：https://mp.weixin.qq.com/s/FQboZRMhdOFWqVDZ5JScDg 点击查看

使用场景

在网页开发中，我们尝尝会遇到宫格布局，比如：3 * 3，4 * 4布局等等。
网格布局中的重复轨道，可以完美解决这种布局问题。

---

示例代码

<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>

.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;
}

---

关键代码

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 小拾岁月