CSS Grid 布局是一种强大的前端布局方式，它可以让我们更轻松地创建复杂的网站布局。在 CSS Grid 中，我们可以通过定义网格列和网格行的方式，来实现我们想要的布局效果。接下来，我们将探讨如何掌握 CSS Grid 布局中的列与行技巧，让我们创建一流的网站。
网格列技巧
定义网格列
在 CSS Grid 中，我们可以通过 grid-template-columns 属性来定义网格列。例如，以下代码将创建一个包含两个等宽的网格列的网格布局：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}这将创建一个包含两个等宽的网格列的网格布局。我们可以使用 fr 单位来定义每个列的宽度。fr 单位表示网格容器的可用空间的一部分。例如，如果我们将 grid-template-columns 属性设置为 1fr 2fr，则第一个列的宽度将是第二个列宽度的一半。
自适应网格列
有时候我们希望网格列的宽度可以自适应。例如，如果我们有一个包含不同长度的文本的网格项，我们希望网格列的宽度可以根据文本的长度而自适应。这时，我们可以使用 minmax 函数来定义网格列的宽度。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}这将创建一个自适应的网格布局，其中每个列的最小宽度为 200px，最大宽度为网格容器的可用空间的一部分。
网格行技巧
定义网格行
在 CSS Grid 中，我们可以通过 grid-template-rows 属性来定义网格行。例如，以下代码将创建一个包含两个等高的网格行的网格布局：
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
}这将创建一个包含两个等高的网格行的网格布局。我们可以使用 fr 单位来定义每行的高度。fr 单位表示网格容器的可用空间的一部分。例如，如果我们将 grid-template-rows 属性设置为 1fr 2fr，则第一个行的高度将是第二个行高度的一半。
自适应网格行
有时候我们希望网格行的高度可以自适应。例如，如果我们有一个包含不同高度的图片的网格项，我们希望网格行的高度可以根据图片的高度而自适应。这时，我们可以使用 minmax 函数来定义网格行的高度。
.grid-container {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}这将创建一个自适应的网格布局，其中每个行的最小高度为 200px，最大高度为网格容器的可用空间的一部分。
示例代码
以下代码演示了如何使用 CSS Grid 布局来创建一个自适应的网格布局，其中每个网格项的宽度和高度都可以根据其内容的大小而自适应。
-- -------------------- ---- -------
---- -----------------------
---- ----------------------- ----- ----- --- ----- ----------- ---------- -----------
---- ---------------------- -----------------------
---- ---------------------- -----------------------
---- ---------------------- -----------------------
---- ------------------------------ --- ----- --- ------ --------- ----------------
---- ---------------------- -----------------------
---- --------------------------- -- --------- ------ --- ------ ------------
---- ---------------------- -----------------------
------
-------
--------------- -
-------- -----
---------------------- ---------------- ------------- ------
------------------- ---------------- ------------- ------
--------- -----
-
---------- -
----------------- -----
-------- -----
---------- -----
----------- -------
-
---------- --- -
---------- -----
----------- -----
-
--------总结
CSS Grid 布局是一种强大的前端布局方式，它可以让我们更轻松地创建复杂的网站布局。通过掌握 CSS Grid 布局中的列与行技巧，我们可以更加灵活地使用 CSS Grid 布局来创建一流的网站。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6560a92dd2f5e1655dadb901