grid网格布局，如何定义网格线名称？如何使用网格线名称？

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

继续说grid网格布局，本文的主要视角和以前的文章有所不同。本文说的是网格布局中最容易被忽略的网格线，注意这个网格线和gap的概念还是有所不同的，苏南大叔理解着就类似于坐标线，它只是一条线，理论上并没有宽度的说法。而gap则是有宽度的说法，并且最边侧的位置并没有空隙存在，但是最边侧的位置是存在网格线的。

大家好，这里是苏南大叔的“程序如此灵动”博客，这里记录苏南大叔的代码所学所想。本文测试环境：win10，chrome。

基本知识

本文内容的顺利解读，您可能需要先看下面两篇文章：

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

首先grid-template有两种用法，一种是直接代表grid-template-areas的简写。另外一种是代表grid-template-rows和grid-template-columns的组合定义。

在前面的文章里面，属性组合是：

• 定义grid-template-rows和grid-template-columns，或者使用它们的组合grid-template。
• grid-template-areas+grid-area，用grid-template-rows和grid-template-columns来补充尺寸信息。

测试用例

本文中，使用的组合是：
grid-template-columns+grid-template-rows定义尺寸及网格线名称，以及grid-area的第二种用法。

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

<div class="box">
  <div>苏</div>
  <div>南</div>
  <div>大</div>
  <div>叔</div>
</div>
<style>
  .box {
    display: grid;
    grid-template-columns: [su-s da-s] 1fr 1fr [su-e da-e nan-s shu-s] 1fr 1fr [nan-e shu-e];
    grid-template-rows: [su-s nan-s] 1fr 1fr [su-e nan-e da-s shu-s] 1fr 1fr [da-e shu-e];
    grid-gap: 10px;
  }
  .box > div {
    background: red;
    text-align: center;
    font-size: 20px;
    color: white;
  }
  .box > div:nth-child(1) {
    grid-area: su-s;
    /* grid-area: su-s / su-s / su-e / su-e; */
  }
  .box > div:nth-child(2)  {
    grid-area: nan-s / nan-s;
    /* grid-area: nan-s / nan-s / nan-e/ nan-e; */
  }
  .box > div:nth-child(3)  {
    grid-area: da-s / da-s / da-e;
    /* grid-area: da-s / da-s / da-e / da-e; */
  }
  .box > div:nth-child(4)  {
    grid-area: shu-s / shu-s / shu-e / shu-e;
    /* grid-area: shu-s / shu-s / shu-e / shu-e; */
  }
</style>

定义网格线

在本文中，在grid-template-columns+grid-template-rows中，

• 使用中括号定义了网格线的名字。
• 一条网格线可以有多个名字
• 也不是所有的网格线都需要被定义出个名字。
• 两条不同的网格线，可以有相同的名字。就像都是一号线或者二号线一样。

-s这里代表-start，-e这里代表-end。就是和grid-row和grid-column中的-start和-end关键词进行区分。参考文章：https://newsn.net/say/grid-zindex.html

使用网格线

网格线被定义之后，是在grid-area里面使用的，理解为原来的数字坐标的一种平行替换即可。

grid-area: 数字坐标 / 数字坐标 / 数字坐标 / 数字坐标;

grid-area: 网格线名称 / 网格线名称 / 网格线名称 / 网格线名称;

[su-s da-s] 1fr 1fr [su-e da-e nan-s shu-s] 1fr 1fr [nan-e shu-e];

理解为：

[1 一] 1fr 1fr [3 三 叁 three] 1fr 1fr [5 伍];

特殊的grid-area默认规则

本文中，本来是四个元素平分版面的效果，但是实际上并不是这样的效果。如下图所示：

之所以出现这些偏差，就与grid-area的默认值有关，
grid-row-start / grid-column-start / grid-row-end / grid-column-end。

演变如下：
grid-row-start / grid-column-start / grid-row-end / [默认grid-column-start效果为span1]。
grid-row-start / grid-column-start / [默认grid-row-start效果为span1] / [默认grid-column-start效果为span1]。
grid-row-start / [默认grid-row-start] / [默认grid-row-start效果为span1] / [默认grid-column-start效果为span1]。

相关链接

• 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
• https://newsn.net/say/grid-zindex.html

总结

本文中定义了网格线的名字，并且在grid-area里面使用定义row和column的开始和结束位置的网格线名称。本文比较难以理解，仔细想一想吧。更多文章请点击：

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

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