CSS Grid 是一种强大的网格布局系统，它能够让前端开发者更加容易地实现复杂的布局。在本文中，我们将介绍 10 个不可不知的技巧，帮助你更好地理解和使用 CSS Grid。
1. 定义网格容器
要使用 CSS Grid，首先需要定义一个网格容器。可以通过设置容器的 display 属性为 grid 或 inline-grid 来实现。例如：
.container {
display: grid;
}2. 定义网格行和列
定义网格容器后，需要定义网格行和列。可以使用 grid-template-rows 和 grid-template-columns 属性来定义。例如：
.container {
display: grid;
grid-template-rows: 100px 200px 300px;
grid-template-columns: 1fr 2fr 1fr;
}这个例子定义了 3 行和 3 列的网格，第一行高度为 100 像素，第二行高度为 200 像素，第三行高度为 300 像素，第一列和第三列的宽度为网格容器总宽度的 1/3，第二列的宽度为网格容器总宽度的 2/3。
3. 网格行和列的缩写
如果需要定义相同大小的网格行或列，可以使用 repeat() 函数来简化代码。例如：
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
}这个例子与前面的例子相同，但使用了 repeat() 函数来简化代码。
4. 网格行和列的命名
可以为网格行和列命名，以便更容易地管理它们。可以使用 grid-template-areas 属性来定义网格行和列的命名。例如：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ --------
----- ---- --------
------- ------ ---------
-这个例子定义了 3 行和 3 列的网格，并为每个网格区域命名。第一行包含 header 和 sidebar 区域，第二行包含 main 和 sidebar 区域，第三行包含 footer 和 sidebar 区域。
5. 使用网格行和列的命名
定义网格行和列的命名后，可以使用 grid-area 属性来将子元素放置在特定的网格区域中。例如：
-- -------------------- ---- ------- ------- - ---------- ------- - ----- - ---------- ----- - -------- - ---------- -------- - ------- - ---------- ------- -
这个例子将每个子元素放置在特定的网格区域中，例如，.header 元素被放置在 header 区域，.main 元素被放置在 main 区域，以此类推。
6. 网格行和列的间距
可以使用 grid-row-gap 和 grid-column-gap 属性来定义网格行和列之间的间距。例如：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ --------
----- ---- --------
------- ------ ---------
------------- -----
---------------- -----
-这个例子定义了 3 行和 3 列的网格，并为每个网格区域命名。同时，定义了 20 像素的行和列间距。
7. 网格自动布局
如果不想手动定义每个子元素的位置，可以使用网格自动布局。可以使用 grid-auto-rows 和 grid-auto-columns 属性来定义自动布局行和列的大小。例如：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ --------
----- ---- --------
------- ------ ---------
--------------- ------
------------------ ----
-这个例子定义了 3 行和 3 列的网格，并为每个网格区域命名。同时，定义了自动布局行的高度为 100 像素，自动布局列的宽度为网格容器总宽度的 1/3。
8. 网格对齐方式
可以使用 justify-items 和 align-items 属性来定义子元素在网格中的对齐方式。例如：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ --------
----- ---- --------
------- ------ ---------
------------- -----
---------------- -----
-------------- -------
------------ -------
-这个例子定义了 3 行和 3 列的网格，并为每个网格区域命名。同时，定义了 20 像素的行和列间距，并将子元素在网格中水平和垂直居中对齐。
9. 网格响应式布局
可以使用媒体查询来实现网格响应式布局。例如：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ --------
----- ---- --------
------- ------ ---------
------------- -----
---------------- -----
-------------- -------
------------ -------
-
------ ----------- ------ -
---------- -
------------------- --------- -------
---------------------- ----
--------------------
--------
------
---------
---------
-
-这个例子定义了 3 行和 3 列的网格，并为每个网格区域命名。同时，定义了 20 像素的行和列间距，并将子元素在网格中水平和垂直居中对齐。在 768 像素以下的屏幕宽度上，使用媒体查询重新定义了网格，使其变成了 4 行和 1 列的网格。
10. 网格布局实例
最后，我们来看一个完整的网格布局示例：
<div class="container"> <div class="header">Header</div> <div class="main">Main</div> <div class="sidebar">Sidebar</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
------------------- --------- -------
---------------------- --------- -----
--------------------
------- ------ --------
----- ---- --------
------- ------ ---------
------------- -----
---------------- -----
-------------- -------
------------ -------
-
------- -
---------- -------
----------------- --------
-
----- -
---------- -----
----------------- --------
-
-------- -
---------- --------
----------------- --------
-
------- -
---------- -------
----------------- --------
-这个例子定义了一个包含头部、主体、侧边栏和底部的网格布局。头部、主体和底部各占据一行，侧边栏占据三列。同时，定义了行和列之间的 20 像素间距，并将子元素在网格中水平和垂直居中对齐。每个子元素都被放置在特定的网格区域中，并设置了不同的背景颜色。
结论
CSS Grid 是一种强大的网格布局系统，可以帮助前端开发者更容易地实现复杂的布局。本文介绍了 10 个不可不知的技巧，帮助你更好地理解和使用 CSS Grid。希望这些技巧能够对你的前端开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676292dc856ee0c1d4062ff5