CSS “grid-template-rows: auto auto 1fr auto” 的解释

在本文中，我们将介绍如何解释CSS中的 “grid-template-rows: auto auto 1fr auto” 属性。这是一个用于定义CSS网格布局的属性。

阅读更多：CSS 教程

网格布局简介

CSS网格布局是CSS3的一项新功能，它可以将网页的布局分割成网格，然后可以在这些网格中放置内容。网格布局提供了更直观、灵活的方式来设计和排列网页的各个元素。

grid-template-rows属性

“grid-template-rows”属性用于定义网格布局中的行大小。在本例中，我们将使用 “grid-template-rows: auto auto 1fr auto” 这个具体的值来解释。

auto

“auto” 是CSS中的一个关键字，用于定义自动分配尺寸。当行的尺寸设置为”auto”时，它将根据内容的大小自动调整行的高度。

1fr

“fr”（fraction）也是CSS中的一个关键字，用于定义一个分数单位。在 “grid-template-rows” 属性中，我们可以指定一个值为”1fr”，表示将剩余的空间按比例分配给这一行。在本例中，它代表将剩余的空间平均分配给第三行。

结合起来

回到 “grid-template-rows: auto auto 1fr auto”，这个值定义了网格布局中四行的大小。第一行和最后一行都是”auto”，这意味着它们的高度将根据内容进行自动调整。第三行的高度将根据剩余的空间按比例分配，而其他行则不受影响。

示例

为了更好地理解 “grid-template-rows: auto auto 1fr auto” 的效果，让我们看一个具体的示例。

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 10px;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: blue;
}

.item3 {
  background-color: green;
}

.item4 {
  background-color: yellow;
}

在这个示例中，我们创建了一个网格容器，并在其中放置了四个元素。通过设置 “grid-template-rows: auto auto 1fr auto”，我们定义了四行的大小。结果如下：