CSS Grid Layout 是 CSS 的一种新布局模式，可以实现复杂的网格布局和响应式布局。本文将介绍如何使用 CSS Grid 实现响应式的方格布局和菜单布局。
响应式方格布局
响应式方格布局是指在不同的屏幕尺寸下，自动适应不同的列数和行数的网格布局。下面我们来实现一个三列自适应的方格布局。
首先，我们需要为容器设置 display: grid 属性，使其成为一个网格容器。然后，我们使用 grid-template-columns 属性为容器定义三个等宽的列。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}现在，我们的容器具有了三列等宽的网格。
接下来，我们可以使用 grid-auto-rows 属性定义每个网格的高度。这里我们使用 minmax 函数设置网格的最小高度为 100px，最大高度为自适应高度。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}现在，我们的网格布局可以自适应不同的行数和屏幕尺寸了。
最后，我们可以使用 grid-gap 属性定义每个网格之间的间距。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 20px;
}现在，我们的响应式方格布局就完成了。下面是完整的示例代码：
-- -------------------- ---- -------
---- -----------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
--------------- ------------- ------
--------- -----
-
---------- -
----------------- -----
-------- -----
-
--------响应式菜单布局
响应式菜单布局是指在小屏幕设备下，自动将菜单项变为下拉列表的布局。下面我们来实现一个响应式菜单布局。
首先，我们需要为菜单容器设置 display: grid 属性，使其成为一个网格容器。然后，我们使用 grid-template-columns 属性定义两个列，第一个是菜单项的标题列，第二个是菜单项的下拉列表。
.menu-container {
display: grid;
grid-template-columns: auto 1fr;
}现在，我们的菜单容器具有了两个列。
接下来，我们可以使用 grid-template-rows 属性定义菜单项的行高。这里我们使用 minmax 函数设置行高的最小值和最大值。
.menu-container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: repeat(3, minmax(50px, auto));
}现在，我们的菜单容器具有了三行等高的网格。
接下来，我们可以在菜单容器中添加菜单项的标题列和下拉列表列。标题列使用 grid-column 和 grid-row 属性定位，下拉列表列使用 display: none 属性隐藏。
<div class="menu-container">
<div class="menu-title" style="grid-row: 1 / 2;">菜单</div>
<div class="menu-list" style="grid-row: 2 / 4; display: none;">
<a href="#">菜单项1</a>
<a href="#">菜单项2</a>
<a href="#">菜单项3</a>
</div>
</div>现在，我们的菜单项已经准备好了，接下来我们需要使用 JavaScript 来实现菜单的交互效果。当窗口尺寸小于一定值时，我们将菜单项的下拉列表显示出来，并添加一个点击事件来切换下拉列表的状态。
-- -------------------- ---- -------
------------------------------------------- ---------- -
--- -------- - -------------------------------------
--- --------- - --------------------------------------
--- ------------- - ------------------------------------------
--- ----------- - ------------------
--- ---------- - ---------- -
-- ----------------------- --- ------- -
---------------------- - --------
----------------------------------
------------------------------------ - ---------- ------------ --------
- ---- -
---------------------- - -------
-------------------------------------
------------------------------------ - ---------- ------------ --------
-
--
-- ------------ - ---- -
----------------------------------- ------------
-
--------------------------------- ---------- -
--- -------------- - ------------------
-- --------------- -- ---- -
---------------------- - --------
-------------------------------------
- ---- -
---------------------- - -------
-------------------------------------
------------------------------------ - ---------- ------------ --------
-
---
---现在，我们的响应式菜单布局就完成了。下面是完整的示例代码：
-- -------------------- ---- -------
---- -----------------------
---- ------------------ ---------------- - - ------------
---- ----------------- ---------------- - - -- -------- -------
-- -----------------
-- -----------------
-- -----------------
------
------
-------
--------------- -
-------- -----
---------------------- ---- ----
------------------- --------- ------------ -------
--------- -----
-
----------- -
----------------- -----
-------- -----
----------- -------
------- --------
-
------------------ -
----------------- -----
------ -----
-
---------- -
----------------- -----
-------- -----
-
--------
--------
------------------------------------------- ---------- -
--- -------- - -------------------------------------
--- --------- - --------------------------------------
--- ------------- - ------------------------------------------
--- ----------- - ------------------
--- ---------- - ---------- -
-- ----------------------- --- ------- -
---------------------- - --------
----------------------------------
------------------------------------ - ---------- ------------ --------
- ---- -
---------------------- - -------
-------------------------------------
------------------------------------ - ---------- ------------ --------
-
--
-- ------------ - ---- -
----------------------------------- ------------
-
--------------------------------- ---------- -
--- -------------- - ------------------
-- --------------- -- ---- -
---------------------- - --------
-------------------------------------
- ---- -
---------------------- - -------
-------------------------------------
------------------------------------ - ---------- ------------ --------
-
---
---
---------结语
CSS Grid 布局提供了强大的布局能力，可以轻松实现复杂的网格布局和响应式布局。本文介绍了如何使用 CSS Grid 实现响应式的方格布局和菜单布局，并提供了完整的示例代码。希望本文能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678232e2935627c900fc478d
