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

这个grid网格布局还真是复杂，本文苏南大叔再来回顾一下grid-area属性的另外一个用法。值得说明的是：grid-template也有两种完全不同的用法，真是令人火大。

苏南大叔：grid网格布局，如何理解grid-area属性？两种用法 - grid网格布局元素的起始结束坐标
grid网格布局，如何理解grid-area属性？两种用法（图2-1）

大家好，这里是苏南大叔的“程序如此灵动”博客。本文描述grid-area属性的用法，测试环境：win10，chrome。

第一种用法，填写位置名

grid-area: itemname;
CSS

这种用法，还得回顾一下下面这篇文章：

.box {
    display: grid;
    grid-template-areas:"name name . name2";
}
.item{
  grid-area: name;
}
CSS

这里使用了grid-template的第二种用法，即定义grid-template-areas的方式。然后通过定义对应子元素的grid-area后面为areas里面的某个名称，来取得了两者之间的联系。

苏南大叔原来以为是：grid-area先定义了名字，然后grid-template-areas才生效。然而，这样的话，后面的第二种写法就解释不通了。那么，很有可能是grid-template-areas先生效，然后元素才通过定义grid-area到areas里面的某个位置名称，来取得联系。

第二种用法，填写位置信息

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
CSS

还可以表述为span的格式：

grid-area: [row-start]/[column-start]/span [row-end减去row-start]/span [column-end减去column-start];
CSS

这种用法，需要先看看下面这篇文章：

测试用例代码如下：

<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-auto-flow: dense; */
    grid-gap: 2px;
    width: 300px;
    height: 300px;
    background: rgb(255, 255, 255);
  }
  .item:nth-child(1) {
    /* grid-row-start: 2;
    grid-row-end: 4; */
    grid-area: 2 / auto / 4 / auto;
    grid-area: 2 / 1 / 4 /2;
    grid-area: 2 / 1 / span 2 / span 1;
  }
  .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

在本例中，以下这几组css，表述的是同样的意思：

grid-row-start: 2;
grid-row-end: 4;
CSS
grid-area: 2 / 4;
CSS
grid-area: 2 / auto / 4;
CSS
grid-area: 2 / auto / 4 / auto;
CSS
grid-area: 2 / 1 / 4 /2;
CSS
grid-area: 2 / 1 / span 2 / span 1;
CSS

苏南大叔：grid网格布局，如何理解grid-area属性？两种用法 - grid-area-span
grid网格布局，如何理解grid-area属性？两种用法（图2-2）

如果grid-area就一个值的话，那么它表示的意思就是grid-row-start。
如果grid-area有两个值的话，那么它表示的意思就是grid-row-startgrid-column-start。

相关文章

总结

写了很多css的相关文章，如果您有兴趣，可以点击下面的链接，找到相关文章。

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

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

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

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