为什么grid-template-rows跟踪模式不会像grid-template-columns那样重复 [英] Why grid-template-rows track pattern does not repeat like grid-template-columns

查看：71
本文介绍了为什么grid-template-rows跟踪模式不会像grid-template-columns那样重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个简单的网格(总共二十个.grid_item s):

Here is a simple grid (there are a total of twenty .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/

Note: what I am going to try and explain can be seen here: https://jsfiddle.net/xth3ky0m/3/

显示网格时，将根据grid-template-columns: 1fr 1fr 1fr;显示每个<h1 class = "grid_item"><h1>，但仅前三行位于grid-template-rows: 300px 1fr 100px;之后.在前三行之后，每行只是1fr. 300px 1fr 100px行模式不会像1fr 1fr 1fr列模式那样自动重复.为什么是这样?

When the grid is displayed, every <h1 class = "grid_item"><h1> is displayed according to grid-template-columns: 1fr 1fr 1fr; but only the first three rows follow grid-template-rows: 300px 1fr 100px;. After the first three rows, each row is just 1fr. The 300px 1fr 100px row pattern does not automatically repeat like the 1fr 1fr 1fr column pattern. Why is this?

推荐答案

默认情况下，CSS网格布局会填充所有 explicit 行(请注意， explicit 行或列是使用诸如grid-template-columns，grid-template-rows，grid-template-areas之类的属性指定的内容，并根据需要创建新行(隐式行).此行为归因于grid-auto-flow属性-请参见MDN的以下摘录:

A CSS grid layout by default fills all the explicit rows (note that explicit rows or columns are that which you specify using properties like grid-template-columns, grid-template-rows, grid-template-areas) and creates new rows as necessary (implicit rows). This behavior is due to grid-auto-flow property - see the below excerpt from 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.

行方向自动流

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

Auto-flow in row direction

This explains why the grid items fills all the explicit columns in a row and then moves on to the next row creating an implicit row if needed. You can specify the size of implicit rows (from the 4th row in your example) using grid-auto-rows property:

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

此处的网格项填充一列中的所有 explicit 行，然后移至下一列，并在需要时创建 implicit 列.您可以使用grid-auto-columns属性指定隐式列的大小(从示例中的第4 行开始):

The grid items here fills all the explicit rows in a column and then moves on to the next column creating an implicit column if needed. You can specify the size of implicit columns (from the 4th row in your example) using grid-auto-columns property:

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

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

这是 auto 而不是1fr-您可以使用grid-auto-rows属性进行控制.

It is auto and not 1fr - you can control this using grid-auto-rows property.

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

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

默认情况下，通过填充可用的 explicit 列来创建 隐式行.如果您切换到grid-auto-flow: column，则可以采用另一种方法.

Implicit rows are created by filling available explicit columns by default. If you switch to grid-auto-flow: column you can have it the other way around.

您可以在此处了解有关显式和隐式网格的更多信息:自动添加CSS网格不需要的列

You can read more about Explicit and Implicit Grids here: CSS Grid unwanted column added automatically

这篇关于为什么grid-template-rows跟踪模式不会像grid-template-columns那样重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆