html - 为什么 grid-template-rows 轨道模式不像 grid-template-columns 那样重复

标签 html css css-grid

这是一个简单的网格(总共有二十个.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那样自动重复列图案。为什么是这样？

最佳答案

默认情况下，CSS 网格布局会填充所有显式 行(请注意，显式 行或列是您使用诸如 grid-template- 之类的属性指定的行或列。 columns、grid-template-rows、grid-template-areas)并根据需要创建新行(隐式 行)。此行为是由于 grid-auto-flow 属性造成的 - 请参阅以下来自 MDN 的摘录:

grid-auto-flow: row

Is a keyword specifying that the auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

行方向自动流动

这解释了为什么网格项填充一行中的所有显式列，然后移动到下一行创建隐式行如果需要的话。您可以使用 grid-auto-rows 属性指定隐式行的大小(从示例中的第 4th 行开始):

* {
  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>

列方向自动流动

此处的网格项填充列中的所有显式行，然后移动到下一列，根据需要创建隐式列。您可以使用 grid-auto-columns 属性指定隐式列的大小(从示例中的第 4 行开始):

* {
  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>

接下来回答你的问题:

After the first three rows, each row is just 1fr.

它是auto，而不是1fr - 您可以使用grid-auto-rows属性来控制它。

The 300px 1fr 100px row pattern does not automatically repeat like the 1fr 1fr 1fr column pattern.

默认情况下，

隐式行是通过填充可用的显式列来创建的。如果您切换到grid-auto-flow:column，您可以以相反的方式使用它。

您可以在此处阅读有关显式和隐式网格的更多信息:CSS Grid unwanted column added automatically

关于html - 为什么 grid-template-rows 轨道模式不像 grid-template-columns 那样重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56062699/

上一篇：html - Squarespace 网站上的视差抖动

下一篇：html - CSS 网格最小跨度 3，如果类对象只是网格行中的对象，则填充行中的所有网格元素

相关文章：

html - 将文本置于图像之上

python - html 中的重定向失败

html - 上下两个 div 堆叠在另一对相似的 div 旁边

html - css网格无法在下一行显示数据

css - 网格布局中带有 rotate3d 动画的边栏

javascript - 使用 JavaScript 作为 HTML 属性值的语法

C# ASP.net，使用字符串变量存储和编写 HTML

html - 无法让视频在同一个 <div> 容器中落后于图像

javascript - 图像上关闭按钮的 anchor 标记在 safari 中不起作用

css - 关于我的 react 应用程序中的网格布局的问题

©2024 IT工具网  联系我们