CSS Grid 是一种新的布局方式，其灵活性和强大性方便了我们进行网站布局的设计。在 CSS Grid 中，我们需要掌握如何处理网格线的长度，以便更好地利用网格系统。
确定网格线的长度
在 CSS Grid 中，我们需要确定网格线的长度。网格线的长度可以使用百分比、fr 单位和像素等进行指定。
使用百分比
使用百分比指定网格线的长度是一种很好的方式，因为它们是相对于父元素的。这意味着，如果您的页面缩放到不同的大小，你的网格系统也会自动相应地调整。
.container {
display: grid;
grid-template-columns: 20% 60% 20%;
}在上面的示例中，我们定义了一个拥有三列的网格容器，分别占据父元素宽度的 20%、60% 和 20%。
使用 fr 单位
fr 单位表示可用空间的分数，而不是像素或百分比。例如，如果一个容器包含两列，每列宽度均为 1fr，则两列将平均占据可用空间。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}在上述示例中，我们定义了一个拥有两列的网格容器，每列都占用可用空间的一半。
使用像素
您也可以使用像素指定网格线的长度。
.container {
display: grid;
grid-template-columns: 200px 300px 400px;
}在上面的例子中，我们定义了一个拥有三列的网格容器，每Column均占据 200px、300px 和 400px 的宽度。
如何使用网格线
使用网格线可以帮助您更好地控制页面布局。
网格行和列
在网格系统中，行和列都是由网格线定义的。在示例代码中，我们定义了 拥有两行和三列的网格系统。
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 1fr 1fr;
}在上述代码中，我们定义了两个行和三个列的网格系统。
网格线的编号
每个网格线都有它自己的编号。网格线从左往右、从上到下，依次排列编号。
在下面示例中，我们定义了网格行和列中的编号：
.container {
display: grid;
grid-template-rows: [row1] 100px [row2] 200px [row3];
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
}在上述代码中，我们定义了一个拥有两个行和三个列的网格系统，其中行的编号为 row1、row2 和 row3，列的编号为 col1、col2、col3 和 col4。
显示网格线
您可以在 CSS Grid 中启用网格线显示功能，以便更好地了解您的布局。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ------ ---------------------- --- --- ---- ------- --- ----- ----- - ---------- - - - ------- --- ----- ----- -
在上述代码中，我们为容器添加了边框，并选择每个子元素都添加了一个边框。
定义网格区域
在 CSS Grid 中，我们还可以为子元素定义它们的位置和大小，并称之为网格区域。
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ------ ---------------------- --- --- ---- ------- --- ----- ----- - ------- - --------- - - ---- -- ------------ - - ---- -- -
在上面的示例中，我们定义了一个名为 item-a 的子元素，并指定了它所占据的网格行和列。
结论
CSS Grid 为前端开发人员提供了强大的工具来设计网站布局。本文介绍了如何处理网格线的长度和如何使用网格线。我们还深入探讨了网格行和列的编号，以及如何定义网格区域。希望这篇文章对于您在使用 CSS Grid 进行网站布局设计时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e5415947dc5bcb30a573c