网格布局之跨行越列

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

使用场景

  在常见的页面布局中，我们往往会遇到那种类似合并单元格的布局。比如：成绩排名、产品排名等等。在进行页面元素分析时，第 1、2、3 名与其他名次没有区别，只是页面对其的描述篇幅较多而已。此时，使用网格布局中的跨行越列恰如其分。

---

示例代码

<div class="grid-container">
	<div class="grid-item item1">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
</div>

.grid-container {
	width: 800px;
	padding: 1px;
	display: grid;
	background-color: red;
	grid-template-rows: repeat(2, 100px);
	grid-template-columns: repeat(3, 1fr);
}

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

.item1 {
	grid-column-start: 1;
	grid-column-end: 4;
}

---

关键代码

.item1 {
	grid-column-start: 1;
	grid-column-end: 4;
}

页面布局

• 在未对 .item1 进行处理前，布局如下：

• 在对 .item1 进行处理后，布局如下：

温馨提示

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