网格布局之网格线编号定位

本文主要是介绍网格布局之网格线编号定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

网格布局之网格线编号定位

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

名词解释

网格线：用与表示网格开始与结束的线。每条网格线都是从 1 开始，分为 行网格线 与 列网格线。

---

页面代码

<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 class="grid-item">5</div><div class="grid-item">6</div>
</div>

.grid-container {width: 800px;padding: 1px;display: inline-grid;background-color: red;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(2, 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-row-start: 2;grid-row-end: 3;grid-column-start: 2;grid-column-end: 3;
}

---

关键代码

.item1 {grid-row-start: 2;grid-row-end: 3;grid-column-start: 2;grid-column-end: 3;
}

代码解释

• grid-row-start: 2;grid-row-end: 3;grid-column-start: 2;grid-column-end: 3; 表示 .item1 定位到横向网格线2与3，与纵向网格线2与3之间的项目格项目；

---

布局展示

---

温馨提示

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

这篇关于网格布局之网格线编号定位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---