CSS布局模式之Flex布局&Grid布局（二）

CSS布局模式之Flex布局&Grid布局（一）https://developer.aliyun.com/article/1426126

3.3 Grid容器的属性

3.3.1 grid-template-rows和grid-template-columns

在Grid布局中，grid-template-rows和grid-template-columns属性用于定义Grid容器的行和列的大小、数量以及属性。

grid-template-rows属性可以指定每一行的高度，也可以使用重复函数（repeat()）来定义重复性较高的行及其属性。例如，以下代码定义了一个包含三行的Grid容器，其中第一行高度为50像素，第二行和第三行的高度为自适应高度：

grid-template-rows: 50px auto auto;

grid-template-columns属性则可以指定每一列的宽度，同样也可以使用repeat()函数来定义多个重复的列。例如，以下代码定义了一个包含四个列的Grid容器，其中第一列宽度为25%，第二列和第三列的宽度为自适应宽度，第四列的宽度为20%：

grid-template-columns: 25% auto auto 20%;

同时，grid-template-rows和grid-template-columns属性也支持使用像素（px）、百分比（%）、em、rem等单位来定义宽度和高度。它们还允许使用minmax()函数来限制网格轨道的大小，也可以使用fr单位来设置根据可用空间计算的比例系数。

在grid-template-rows和grid-template-columns属性中，使用空格或斜线符号的组合来表示相邻的列和行。例如，下面的代码演示了通过在grid-template-rows和grid-template-columns属性中使用空格和斜线符号，定义一个包含不同大小网格的Grid容器：

.grid {
  display: grid;
  grid-template-rows: 200px 100px 150px;
  grid-template-columns: 100px 1fr 2fr 100px;
}
.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}
.item-2 {
  grid-row: 1 / 2;
  grid-column: 3 / 5;
}
.item-3 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}
.item-4 {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}

通过以上代码，我们可以看到grid-template-rows和grid-template-columns属性提供了灵活的方式来定义网格的大小、资产和数量等，从而实现更精细化和灵活的布局。

3.3.2 grid-template-areas

grid-template-areas属性是Grid布局中用于定义网格区域的一种方式，它允许开发者通过在Grid容器中使用名称来定义一组网格区域，并将这些网格区域分配给特定的Grid项目。

使用grid-template-areas属性，我们可以在Grid容器中定义名称为字符串的矩阵。例如：

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

在这个例子中，我们定义了一个三行三列的网格区域，每个区域被命名为header、sidebar、content和footer。然后，我们可以将Grid项目安排到这些命名区域中，如下所示：

grid-area:
  header header header
  sidebar content content
  footer footer footer;

在这个例子中，我们按照定义的网格区域名称，将Grid项目分配到header、sidebar、content和footer的相应网格区域中。与使用grid-row和grid-column属性相比，使用grid-template-areas可以更直观地表示网格布局结构，方便开发者快速创建并修改复杂网格布局。

需要注意的是，使用grid-template-areas属性时必须使用相同数量的名称来定义网格区域，如果定义的网格区域不相等，则网格不会正确地显示。此外，如果不希望使用矩阵定义网格区域，则可以使用grid-row和grid-column属性来分配网格项目的位置。

3.3.3 grid-auto-rows和grid-auto-columns

在使用Grid布局时，grid-auto-rows和grid-auto-columns属性可用于给未定义行和列设置高度或宽度。这两个属性与grid-template-rows和grid-template-columns属性有所不同，它们的作用是处理那些没有显式声明大小的网格轨道。

grid-auto-rows属性用于给未定义的行设置默认的高度。这个属性可以使用任何长度单位来设置高度的大小。例如，以下代码将未定义的行的高度设置为50像素：

grid-auto-rows: 50px;

grid-auto-columns属性用于给未定义的列设置默认的宽度。同样，这个属性也可以使用任何长度单位来设置宽度的大小。例如，以下代码将未定义的列的宽度设置为100像素：

grid-auto-columns: 100px;

在实际开发中，有的时候只定义了行和列的一部分，而剩余的部分则通过grid-auto-rows和grid-auto-columns属性来设置网格轨道的大小。这样就可以精确控制所有网格轨道的大小，从而更好地实现网格布局。

需要注意的是，如果一个网格单元格跨越了不止一个未定义的行或列，则需要在grid-auto-rows和grid-auto-columns属性中设置足够的大小为其提供足够的空间。因此，在设计网格化布局时应该根据具体情况，谨慎地定义这两个属性的值，以满足网格布局的需求。

3.3.4 grid-auto-flow

在Grid布局中，grid-auto-flow属性可用于控制自动生成的网格布局方式。

grid-auto-flow属性的默认值为row，它表示Grid项目在容器中的自动流动方式按照行的顺序排列。也就是说，从左到右，从上到下。如果我们要改变这种默认流动方式，可以在grid-auto-flow属性中，设置为column表示按照列的顺序排列，也就是从上到下，从左到右；设置为dense表示自动填充未占用的网格区域，以最大程度利用空间。

例如，下面是一个包含了10个Grid项目的Grid容器，我们通过grid-auto-flow: row dense将自动流程设置为按行排列和稠密占用未使用的区域：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}
.item {
  background-color: #ccc;
  height: 100px;
  width: 100px;
}

在上面例子中，我们将Grid容器的自动流程设置为按行自动流动，并指定了dense选项。当Grid项目的尺寸或位置不规则时，dense选项将占用未使用的网格区域，以最大程度利用Grid容器中的空间。

总的来说，grid-auto-flow属性提供了很多的自由度，使得我们在网格布局中更加灵活地控制Grid项目之间的位置和流动方式。

3.3.5 grid

grid是CSS中，用于设置Grid布局的简写属性。它可用于一次性设置所有与Grid布局有关的属性，包括grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow以及与Grid项目相关联的属性。

当使用grid属性时，需要将这些属性的值通过空格、斜线或字符串的形式连接起来。例如以下代码实现一个包含三行三列网格布局的Grid容器，其中第二行和第三行的高度为自适应高度：

grid: 
  "A B C" 100px
  "D E F" auto
  "G H I" auto / 1fr 2fr 1fr;

在这个例子中，我们首先定义了一个3x3的网格布局，其中第二行和第三行的高度设置为auto，其余行的高度为100像素。然后，我们使用斜线符号将行属性和列属性分开，并使用1fr、2fr和1fr将列进行均分。最终，我们将grid-template-areas属性省略掉了，因为我们不需要给每个网格区域命名。

grid属性可以简化CSS样式表的书写，将所有与Grid布局相关的代码组织在一起，更便于开发者的编写和维护。

3.4 Grid项目的属性

3.4.1 grid-row-start

grid-row-start是Grid布局中用于指定网格项开始放置行的起点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

具体来说，grid-row-start属性指定网格项开始放置的行的起点位置。它可以接受以下类型的值：

• ：具有整数值的表示行线的编号，从 1 开始（类似于grid-row:  / ;）
• ：自定义标识符的名称（类似于grid-row: ;）
• span ：指定网格项横跨多少个单元格（类似于grid-row: span ;）
• span ：指定网格项横跨多少个命名的行（类似于grid-row: span ;）

例如，以下代码显示了一个简单的 Grid 布局，其中两个网格项跨越两个行：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item1 {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}
.item2 {
  background-color: blue;
  grid-row: 2 / 4;
}

在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了两个子元素，其中一个元素跨越了第1行和第2行，另一个元素跨越了第2行和第3行。其中，.item1 等价于 grid-row-start: 1; grid-row-end: 3;，.item2 等价于 grid-row: 2 / 4;。这两种写法都可以达到同样的效果，其中 grid-row 是 grid-row-start 和 grid-row-end 的简写方式。

3.4.2 grid-row-end

grid-row-end是Grid布局中用于指定网格项结束放置行的终点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。

具体来说，grid-row-end属性指定网格项结束放置的行的终点位置。与grid-row-start不同的是，grid-row-end属性接受的值的范围是从指定的起点位置到下一个位置。它可以接受以下类型的值：

• ：具有整数值的表示行线的编号，从 1 开始（类似于grid-row:  / ;）
• ：自定义标识符的名称（类似于grid-row: ;）
• span ：指定网格项横跨多少个单元格（类似于grid-row:  / span ;）
• span ：指定网格项横跨多少个命名的行（类似于grid-row:  / span ;）

例如，以下代码显示了一个简单的 Grid 布局，其中一个网格项跨越了两个行：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}

在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了一个子元素，它跨越了第1行和第2行，并占用了所有列。其中，.item 的起点为第1行，终点为第3行。如果仅使用grid-row属性，则等价于grid-row: 1 / 3;。

总的来说，grid-row-end属性非常适合于定义跨越多行或多列的网格项，以及在 Grid 容器中调整网格项的位置和大小。

CSS布局模式之Flex布局&Grid布局（三）https://developer.aliyun.com/article/1426128