CSS Grid 布局是一种强大的前端布局方式，它允许我们以一种简单而直观的方式创建复杂的布局。在本文中，我们将探讨如何使用 CSS Grid 布局中的重复项和指定列宽度的技巧，以便更好地掌握这种布局方式。
重复项
在 CSS Grid 布局中，我们可以使用重复项来定义多个相同的网格轨道。这在创建复杂的布局时非常有用。
例如，如果我们想要在网格中创建 6 个相同宽度的列，我们可以使用以下代码：
--------------- - -------- ----- ---------------------- --------- ----- -
这里，repeat(6, 1fr) 表示我们要创建 6 个宽度为 1fr 的列。使用重复项可以让我们更轻松地创建多个相同的网格轨道，从而简化我们的代码。
指定列宽度
除了使用重复项来创建多个相同宽度的列之外，我们还可以使用 grid-template-columns 属性来指定每个列的宽度。这对于创建非对称的布局非常有用。
例如，如果我们想要创建一个 3 列的网格布局，其中第一列宽度为 200px，第二列宽度为 1fr，第三列宽度为 300px，我们可以使用以下代码：
--------------- - -------- ----- ---------------------- ----- --- ------ -
这里，我们使用了像素和 fr 单位来指定每个列的宽度。在这个例子中，第一列的宽度为 200px，第二列的宽度为剩余空间的 1/3，第三列的宽度为 300px。
示例代码
下面是一个使用重复项和指定列宽度的示例代码，其中包含一个 3 列网格布局：
---- -----------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
--------------- -
-------- -----
---------------------- ----- --- ------
--------- -----
-
----- -
----------------- -----
-------- -----
----------- -------
-
--------在这个示例中，我们创建了一个 3 列网格布局，其中第一列宽度为 200px，第二列宽度为剩余空间的 1/3，第三列宽度为 300px。我们还设置了网格间距为 10px，并对每个网格项设置了背景色和内边距。
总结
在 CSS Grid 布局中使用重复项和指定列宽度是非常有用的技巧，它们可以帮助我们更轻松地创建复杂的布局。使用重复项可以让我们更简洁地定义多个相同宽度的网格轨道，而指定列宽度则可以让我们创建非对称的布局。希望这篇文章对你有所帮助，让你更好地掌握 CSS Grid 布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660d1ae8d10417a222d81095