为什么给网格模板列的跟踪模式自动重复，而给网格模板行的模式不重复？
为什么给网格模板列的跟踪模式自动重复，而给网格模板行的模式不重复？
提问于 2019-05-10 04:16:56
这是一个简单的网格（总共有二十个.grid_item）：
<div class="grid">
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">100 px row, 1fr column </h1>
<h1 class="grid_item">100 px row, 1fr column </h1>
<h1 class="grid_item">100 px row , 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
</div>
CSS：
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr; /*Entire column is 1fr 1fr 1fr*/
grid-template-rows: 600px 1fr 100px; /*Only first three rowsare 600px 1fr 100px; ?*/
grid-gap: 20px;
}
注意：我将尝试解释的内容可以在这里看到：https：//jsfiddle.net/xth3ky0m/3/
显示网格时，每个<h1 class = "grid_item"><h1>都按照显示，grid-template-columns: 1fr 1fr 1fr;但只显示前三行grid-template-rows: 300px 1fr 100px;。在前三行之后，每一行都是正确的1fr。该300px 1fr 100px行模式不会自动重复像1fr 1fr 1fr列模式。为什么是这样？
回答 1
Stack Overflow用户
发布于 2019-05-10 13:56:48
默认情况下，CSS网格布局会填充所有显式行（请注意，显式行或列是您使用grid-template-columns（grid-template-rows，grid-template-areas）等属性指定的行），并根据需要创建新行（隐式行）。此行为是由于grid-auto-flow属性 - 请参阅以下MDN摘录：
grid-auto-flow: row是一个关键字，指定自动放置算法放置项目，依次填充每一行，根据需要添加新行。如果既未提供行也未提供列，则假定为行。
行方向自动流动
这解释了为什么网格项填充行中的所有显式列，然后移动到下一行，如果需要则创建隐式行。您可以使用属性指定隐式行的大小（从示例中的第 4 行开始）grid-auto-rows：
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 300px 1fr 100px;
grid-gap: 20px;
grid-auto-rows: 50px; /* size implicit rows */
}
.grid_item {
border: 1px solid rgb(0, 95, 197);
border-radius: 3px;
background-color: rgba(0, 95, 107, 0.8);
padding: 0.2em;
margin: 0; /* reset h1 margin to see grid better */
overflow: hidden; /* hide overflow text */
}
<body>
<div class="grid">
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">100 px row, 1fr column </h1>
<h1 class="grid_item">100 px row, 1fr column </h1>
<h1 class="grid_item">100 px row , 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
</div>
</body>
列方向自动流动
此处的网格项填充列中的所有显式行，然后移至下一列，根据需要创建隐式列。您可以使用属性指定隐式列的大小（从示例中的第 4 行开始）grid-auto-columns：
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 300px 1fr 100px;
grid-gap: 20px;
grid-auto-flow: column; /* flow in column direction */
grid-auto-columns: 50px; /* size implicit columns */
}
.grid_item {
border: 1px solid rgb(0, 95, 197);
border-radius: 3px;
background-color: rgba(0, 95, 107, 0.8);
padding: 0.2em;
margin: 0; /* reset h1 margin to see grid better */
overflow: hidden; /* hide overflow text */
}
<body>
<div class="grid">
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">300 px row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">100 px row, 1fr column </h1>
<h1 class="grid_item">100 px row, 1fr column </h1>
<h1 class="grid_item">100 px row , 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
<h1 class="grid_item">1fr row, 1fr column</h1>
</div>
</body>
所以提出你的问题：
在前三行之后，每行只有1fr。
它是自动而不是1fr - 你可以使用grid-auto-rows属性来控制它。
该
300px 1fr 100px行模式不会自动重复像1fr 1fr 1fr列模式。
默认情况下，通过填充可用的显式列来创建隐式行。如果你切换到grid-auto-flow: column你可以反过来。
您可以在此处阅读有关显式和隐式网格的更多信息：自动添加CSS网格不需要的列
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006704
复制相关文章
相似问题