如果我为grid-auto-rows指定三个值，CSS会创建三行吗？

Question

说我有属性集：

div {
    display: grid
    grid-auto-rows: 15% 70% 15%;
}

这是否意味着在容器中，将有三行，父容器的百分比为高？

Answer 1

编号grid-auto-rows控制隐式行的高度，隐式行是网格创建的行，用于放置显式网格之外的项目。与grid-auto-rows不同，grid-template-rows不会自动创建行。

https://www.w3.org/TR/css3-grid-layout/#implicit-grids

---

是的，您的grid-template-rows规则将创建一个具有三个显式行的网格。

不，grid-template-rows的百分比值不会与父母的身高相关。它们相对于同一元素（网格容器）的高度。

你可以在这里测试一下：https://jsfiddle.net/2cxw0Lrn/

/* body { height: 100vh; } */

article {
  display: grid;
  grid-auto-rows: 15% 70% 15%;
  grid-gap: 5px;
  height: 100vh; /* disable and try body height above */
  background-color: gray;
}

section { background-color: lightgreen; }
body    { margin: 0; }

<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

此行为在规范中定义：

7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

<length-percentage>

<percentage>值相对于列网格轨道中网格容器的内联大小，以及行网格轨道中网格容器的块大小。

您可以访问规范，了解“内联”和“块”大小的含义。但重点很明确：值是相对于网格容器的。