本文主要是介绍网格布局之网格线编号定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
网格布局之网格线编号定位
欢迎关注：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 小拾岁月
这篇关于网格布局之网格线编号定位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
