如果我为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/

＆＃13;

＆＃13;

/* 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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此行为在规范中定义：

  

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

     

<强> <length-percentage>

     

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

您可以访问规范，了解＆＃34; inline＆＃34;和＆＃34;阻止＆＃34;尺寸。但重点很明确：值是相对于网格容器的。