网格布局之重复轨道
欢迎关注：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 小拾岁月