Question

这是一个简单的网格（总共20个.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列模式那样自动重复。为什么是这样？

Answer 1

默认情况下，CSS网格布局会填充所有 explicit 行（请注意， explicit 行或列是您使用grid-template-columns，{ {1}}，grid-template-rows）并根据需要创建新行（隐式行）。此行为归因于grid-template-areas属性-请参见MDN的以下摘录：

grid-auto-flow: row

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

行方向自动流

这说明了为什么网格项填充一行中的所有 explicit 列，然后移至下一行以创建 implicit 行如果需要的话。您可以使用grid-auto-flow属性指定隐式行的大小（在示例中为第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 */
}

沿列方向自动流动

此处的网格项填充一列中的所有 explicit 行，然后移至下一列，并在需要时创建 implicit 列。您可以使用<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 */
}

所以请问您的问题：

在前三行之后，每行只有1fr。

这是 auto 而不是1fr-您可以使用<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-rows行模式不会像300px 1fr 100px列模式那样自动重复。

默认情况下，通过填充可用的 explicit 列来创建隐式行。如果您切换到1fr 1fr 1fr，则可以采用其他方法。

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

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

1 个答案:

行方向自动流

沿列方向自动流动