为什么网格模板行跟踪模式不像网格模板列那样重复答案

【问题标题】：Why grid-template-rows track pattern does not repeat like grid-template-columns为什么网格模板行跟踪模式不像网格模板列那样重复
【发布时间】：2019-05-09 15:21:08
【问题描述】：

这里是一个简单的网格（总共有二十个.grid_items）：

  <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 列模式那样自动重复。为什么是这样？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

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

grid-auto-flow: row

是一个关键字，指定自动放置算法放置项，依次填充每一行，并根据需要添加新行。如果既没有提供行也没有提供列，假定为行。

行方向自动流动

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

* {
  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^th 行开始）：

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

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

300px 1fr 100px 行模式不会像1fr 1fr 1fr 列模式那样自动重复。

默认情况下，

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

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

【讨论】：