说我有属性集:
div {
display: grid
grid-auto-rows: 15% 70% 15%;
}
这是否意味着在容器中,将有三行,父容器的百分比为高?
编号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
andgrid-template-columns
properties
<length-percentage>
<percentage>
值相对于列网格轨道中网格容器的内联大小,以及行网格轨道中网格容器的块大小。
您可以访问规范,了解“内联”和“块”大小的含义。但重点很明确:值是相对于网格容器的。