grid网格布局，如何理解grid-area属性？两种用法

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

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

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

第一种用法，填写位置名

grid-area: itemname;

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

• https://newsn.net/say/grid-template-areas.html

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

这里使用了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;

还可以表述为span的格式：

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

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

• https://newsn.net/say/grid-row-start.html

测试用例代码如下：

<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>

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

grid-row-start: 2;
grid-row-end: 4;

grid-area: 2 / 4;

grid-area: 2 / auto / 4;

grid-area: 2 / auto / 4 / auto;

grid-area: 2 / 1 / 4 /2;

grid-area: 2 / 1 / span 2 / span 1;

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

相关文章

• https://newsn.net/say/css-grid.html
• https://newsn.net/say/grid-auto-flow.html
• https://newsn.net/say/grid-auto-flow-dense.html
• https://newsn.net/say/grid-template.html
• https://newsn.net/say/grid-template-areas.html
• https://newsn.net/say/grid-minmax.html
• https://newsn.net/say/grid-row.html

总结

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

• https://newsn.net/tag/css/

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