我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文涉及的属性就这么几个grid-row-start、grid-row-end、grid-column-start、grid-column-end。通过描述元素的横纵坐标的开始及结束位置，客观上定义元素的尺寸信息。

苏南大叔：grid网格布局，如何设置元素起始结束坐标信息？ - 起始结束坐标
grid网格布局，如何设置元素起始结束坐标信息？（图5-1）

大家好，这里是苏南大叔的程序如此灵动博客。这里记录苏南大叔的代码经验文章。测试环境：win10，firefox。

查看网格编号

本文的内容，主要是基于网格编号的使用。所以，正确的查看网格编号是首要解决的问题。

浏览器的开发者工具就提供了grid编号的查看方法。开启的方式，就是看grid布局父对象的dom节点的右侧，会出现对应的按钮。点击之后，就可以在界面上显示网格编号。

苏南大叔：grid网格布局，如何设置元素起始结束坐标信息？ - 触发编号显示
grid网格布局，如何设置元素起始结束坐标信息？（图5-2）

测试代码

这里测试代码，非常简单好理解。和普通的grid布局的区别，就是通过grid-row-start、grid-row-end、grid-column-start、grid-column-end，间接的控制了元素的宽度。

<div class="box">
  <div class="item">苏</div>
  <div class="item">南</div>
  <div class="item">大</div>
  <div class="item">叔</div>
</div>
<style>
  .box {
    display: grid;
    grid-template: 1fr 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
    grid-gap: 2px;
    width: 300px;
    height: 300px;
    background: rgb(255, 255, 255);
  }
  .item:nth-child(1){
    grid-row-start:2;
    grid-row-end:4;
  }
  .item:nth-child(2){
    grid-column-start:3;
    grid-column-end:4;
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
  }
  .item:nth-child(odd) {
    background-color: blue;
  }
</style>
HTML

grid-row-start、grid-row-end

这两个属性比较好理解，行row方向（纵坐标方向）开始的编号和结束的编号[start,end]，产生的就是元素的高度信息。

苏南大叔：grid网格布局，如何设置元素起始结束坐标信息？ - row-start-end
grid网格布局，如何设置元素起始结束坐标信息？（图5-3）

以下几种写法，表述的意思是一致的：

grid-column-start:2;
grid-column-end:4;
CSS
grid-column:2/4;
CSS
grid-column:2/span 2;
CSS

grid-column-start、grid-column-end

这两个属性比较好理解，列column方向（横坐标方向）开始的编号和结束的编号[start,end]，产生的就是元素的宽度信息。

苏南大叔：grid网格布局，如何设置元素起始结束坐标信息？ - grid-column-start-end
grid网格布局，如何设置元素起始结束坐标信息？（图5-4）

以下几种写法，表述的意思是一致的：

grid-column-start:3;
grid-column-end:4;
CSS
grid-column:3/4;
CSS
grid-column:3/span 1;
CSS

题外话

既然位置已经错乱，已经出现空白，这里就顺便复习一下dense的用法。看看这几个元素被dense之后是如何排列的呢？

  .box {
    display: grid;
    grid-template: 1fr 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
    grid-auto-flow: dense;
    //...
  }
CSS

苏南大叔：grid网格布局，如何设置元素起始结束坐标信息？ - dense
grid网格布局，如何设置元素起始结束坐标信息？（图5-5）

相关链接

总结

更多苏南大叔的前端代码文章，请参考：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css