CSS Grid 精讲（3） 线和网格单元设置

在前两篇文章中，我们已经介绍了 CSS Grid 布局的基本概念和用法，以及如何使用自动布局和重复网格。在本篇文章中，我们将讨论如何使用线和网格单元进行布局。

线

CSS Grid 布局以线为基础。CSS Grid 中的线是一条虚拟的水平线或垂直线，用于定义网格行和网格列的位置。在 CSS Grid 中使用 line 名称来定位这些线。

行和列线

CSS Grid 中的行和列都可以表示为线。示例代码如下：

-- -------------------- ---- -------
----- -
  -------- -----
  ---------------------- --- ----- ----
  ------------------- ----- --- ------
  --------------------
    ------- ------ -------
    -------- ------- --------
    ------- ------ --------
-

在上面的代码中，我们设置了网格的列和行。grid-template-columns 属性设置了三条列线，分别在左、中、右位置，网格的第一列和第三列宽度相等，第二列宽度为 100px。 grid-template-rows 属性设置了三行，第一行高度为 100px，最后一行同样高度，中间的行是自适应的。

可以用 grid-column 和 grid-row 属性指定某个网格单元的起始、结束位置。示例代码如下：

.item {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

上述代码表示该元素位于第二行、第二列到第三列之间。

自动线

自动线是 CSS Grid 中的一种线，它通常在网格行或网格列中使用。自动行是网格中的未设置行高度的行，自动列是未设置列宽的列。

在 CSS Grid 中，可以使用 grid-auto-rows 和 grid-auto-columns 属性定义自动行和自动列的大小。这两个属性默认为 auto，可以为它们设置固定的值或百分比。

示例代码如下：

.grid {
  display: grid;
  grid-template-columns: 100px auto;
  grid-auto-rows: 50px;
}

上面的代码中设置了两列，第一列为 100px 宽，第二列为自适应宽度。grid-auto-rows 设置了自动行高为 50px，这意味着所有未设置高度的行都将自动设置为 50px。

网格线的编号

网格线分为水平线和垂直线，每一条线都有一个编号。水平线的编号从上到下依次为：1, 2, 3, ...，垂直线的编号从左到右依次为：1, 2, 3, ...。可以使用负数表示线的位置，例如 -1 表示最后一条线。

网格线的名称

除了通过编号来表示网格线外，还可以给网格线设置名称。通过给网格线设置名称，可以更方便地定位和调整网格的布局。

要给网格线设置名称，可以使用 grid-template-rows 和 grid-template-columns 属性的方括号语法。示例代码如下：

.grid {
  display: grid;
  grid-template-columns: [left] 100px [center] auto [right];
  grid-template-rows: [header] 100px [content] 1fr [footer] 100px;
}

上面的代码中，我们给网格的第一列命名为 left，第二列命名为 center，第三列命名为 right。同时，我们还给了网格的第一行命名为 header，第二行命名为 content，第三行命名为 footer。

minmax() 函数

minmax() 是一个 CSS 函数，用于创建一个扩展在给定范围内任意长度的值。该函数可以用于限制网格行和网格列的大小。minmax() 的第一个参数指定最小大小，第二个参数指定最大大小。

示例代码如下：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

在上述代码中，我们使用 minmax(300px, 1fr) 指定了所有列的最小宽度为 300px，最大宽度为自适应宽度。

网格单元

CSS Grid 中的一个网格单元是由四条网格线包围的矩形。在 CSS Grid 中，可以使用 grid-column 和 grid-row 属性定位网格单元。这两个属性都可以采用以下三种格式之一：

• <number>：指定网格线的位置，可以采用正负数来指定线的位置。
• <name>：指定网格线的名称。
• <start>/<end>：指定网格单元在网格中的起始和结束位置。

网格单元同时可以在行和列的方向上进行指定，如下所示：

.item {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}

上述代码中，我们将该网格单元的行指定为从第一条水平线开始，到第三条水平线结束。将该网格单元的列指定为从第二条垂直线开始，到第四条垂直线结束。

在 CSS Grid 中，还可以使用 grid-area 属性来指定网格单元的位置。示例代码如下：

.item {
  grid-area: 1 / 2 / 3 / 4;
}

上述代码中，我们设置该网格单元的位置为：行的起始位置为第一条水平线，结束位置为第三条水平线；列的起始位置为第二条垂直线，结束位置为第四条垂直线。

总结

在这篇文章中，我们介绍了如何使用线和网格单元设置网格布局。通过在 CSS Grid 中定义网格线和网格单元，可以更方便地定位和调整网格中的元素。

CSS Grid 提供了丰富的属性和功能，可以让我们轻松地创建各种布局。掌握 CSS Grid 的用法不仅有助于提高我们的前端技能，同时也能提升网页性能和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647afd2b968c7c53b0691ae1