在前两篇文章中，我们已经介绍了 CSS Grid 布局的基本概念和用法，以及如何使用自动布局和重复网格。在本篇文章中，我们将讨论如何使用线和网格单元进行布局。
线
CSS Grid 布局以线为基础。CSS Grid 中的线是一条虚拟的水平线或垂直线，用于定义网格行和网格列的位置。在 CSS Grid 中使用 line 名称来定位这些线。
行和列线
CSS Grid 中的行和列都可以表示为线。示例代码如下：
----- -
-------- -----
---------------------- --- ----- ----
------------------- ----- --- ------
--------------------
------- ------ -------
-------- ------- --------
------- ------ --------
-在上面的代码中，我们设置了网格的列和行。grid-template-columns 属性设置了三条列线，分别在左、中、右位置，网格的第一列和第三列宽度相等，第二列宽度为 100px。 grid-template-rows 属性设置了三行，第一行高度为 100px，最后一行同样高度，中间的行是自适应的。
可以用 grid-column 和 grid-row 属性指定某个网格单元的起始、结束位置。示例代码如下：
----- - ------------ - - -- --------- - - -- -
上述代码表示该元素位于第二行、第二列到第三列之间。
自动线
自动线是 CSS Grid 中的一种线，它通常在网格行或网格列中使用。自动行是网格中的未设置行高度的行，自动列是未设置列宽的列。
在 CSS Grid 中，可以使用 grid-auto-rows 和 grid-auto-columns 属性定义自动行和自动列的大小。这两个属性默认为 auto，可以为它们设置固定的值或百分比。
示例代码如下：
----- - -------- ----- ---------------------- ----- ----- --------------- ----- -
上面的代码中设置了两列，第一列为 100px 宽，第二列为自适应宽度。grid-auto-rows 设置了自动行高为 50px，这意味着所有未设置高度的行都将自动设置为 50px。
网格线的编号
网格线分为水平线和垂直线，每一条线都有一个编号。水平线的编号从上到下依次为：1, 2, 3, ...，垂直线的编号从左到右依次为：1, 2, 3, ...。可以使用负数表示线的位置，例如 -1 表示最后一条线。
网格线的名称
除了通过编号来表示网格线外，还可以给网格线设置名称。通过给网格线设置名称，可以更方便地定位和调整网格的布局。
要给网格线设置名称，可以使用 grid-template-rows 和 grid-template-columns 属性的方括号语法。示例代码如下：
----- - -------- ----- ---------------------- ------ ----- -------- ---- -------- ------------------- -------- ----- --------- --- -------- ------ -
上面的代码中，我们给网格的第一列命名为 left，第二列命名为 center，第三列命名为 right。同时，我们还给了网格的第一行命名为 header，第二行命名为 content，第三行命名为 footer。
minmax() 函数
minmax() 是一个 CSS 函数，用于创建一个扩展在给定范围内任意长度的值。该函数可以用于限制网格行和网格列的大小。minmax() 的第一个参数指定最小大小，第二个参数指定最大大小。
示例代码如下：
----- - -------- ----- ---------------------- ---------------- ------------- ------ -
在上述代码中，我们使用 minmax(300px, 1fr) 指定了所有列的最小宽度为 300px，最大宽度为自适应宽度。
网格单元
CSS Grid 中的一个网格单元是由四条网格线包围的矩形。在 CSS Grid 中，可以使用 grid-column 和 grid-row 属性定位网格单元。这两个属性都可以采用以下三种格式之一：
<number>：指定网格线的位置，可以采用正负数来指定线的位置。<name>：指定网格线的名称。<start>/<end>：指定网格单元在网格中的起始和结束位置。
网格单元同时可以在行和列的方向上进行指定，如下所示：
----- - --------- - - -- ------------ - - -- -
上述代码中，我们将该网格单元的行指定为从第一条水平线开始，到第三条水平线结束。将该网格单元的列指定为从第二条垂直线开始，到第四条垂直线结束。
在 CSS Grid 中，还可以使用 grid-area 属性来指定网格单元的位置。示例代码如下：
----- - ---------- - - - - - - -- -
上述代码中，我们设置该网格单元的位置为：行的起始位置为第一条水平线，结束位置为第三条水平线；列的起始位置为第二条垂直线，结束位置为第四条垂直线。
总结
在这篇文章中，我们介绍了如何使用线和网格单元设置网格布局。通过在 CSS Grid 中定义网格线和网格单元，可以更方便地定位和调整网格中的元素。
CSS Grid 提供了丰富的属性和功能，可以让我们轻松地创建各种布局。掌握 CSS Grid 的用法不仅有助于提高我们的前端技能，同时也能提升网页性能和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647afd2b968c7c53b0691ae1