命名网格线有什么好处？

Question

在CSS网格布局中命名网格线有什么好处？我见过很多这样的例子，我想知道有什么好处？为什么不依靠行号，而不是first-column-start？

Answer 1

简答

命名网格线使代码更易于理解和维护。

---

说明

网格线是网格的水平和垂直分界线。

在两条平行网格线之间形成列或行。

通过交叉网格线形成网格单元。

来源：W3C CSS Grid Specification

（Qazxswpoi）

网格线可以用数字或定义的名称引用。以下两条规则都是相同的。

block axis / inline axis definitions

请注意，行可以有多个名称。

在布局网格时，我们可以使用数值，如下所示：

#grid-container {
    grid-template-rows: 2em 1fr 3em;
}

#grid-container {
    grid-template-rows: [header-start] 2em [header-end body-start] 1fr [body-end footer-start] 3em [footer-end];
}

或者，为了使事情更容易理解和维护（想想一年后回到这段代码，或者将这段代码传递给其他开发人员），请使用有意义的名称：

#grid-item-1 { grid-row: 1 / 2; } /* the header */

#grid-item-2 { grid-row: 2 / 3; } /* the content */

#grid-item-3 { grid-row: 3 / 4; } /* the footer */

代码示例：

#grid-item-1 { grid-row: header-start / header-end; }

#grid-item-2 { grid-row: body-start / body-end; }

#grid-item-3 { grid-row: footer-start / footer-end; }

article {
  display: grid;
  grid-template-rows: [header-start] 2em [header-end body-start] 1fr [body-end footer-start] 3em [footer-end]; }

}
section:nth-child(1) { grid-row: header-start / header-end; }

section:nth-child(2) { grid-row: body-start / body-end; }

section:nth-child(3) { grid-row: footer-start / footer-end;}

/* non-essential demo styles */
article {
  grid-gap: 1px;
  background-color: gray;
  height: 100vh;
  border: 1px solid gray;
}
section {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
section:nth-child(1) { background-color: aqua; }
section:nth-child(2) { background-color: orange; }
section:nth-child(3) { background-color: lightgreen; }
body                 { margin: 0;}
*                    { box-sizing: border-box; }

更多信息：

<article>
  <section>header</section>
  <section>body</section>
  <section>footer</section>
</article>

Answer 2

好定义

命名网格线为您提供了可以附加内容的网格钩子。

https://www.w3.org/TR/css3-grid-layout/#named-lines