什么是 CSS Grid 布局
CSS Grid 布局（简称 Grid）是一种用于网格化布局的 CSS 布局方式。Grid 通过将页面划分为行和列的网格，使设计者能够更加自由地控制页面布局。
相较于传统布局方式（如 Flexbox），Grid 有着更高的灵活性和更优秀的可读性，可以解决传统布局方式无法轻松解决的复杂布局问题。
展开式菜单的实现
在本文中，我们将展示如何使用 Grid 布局实现一个展开式菜单。这种菜单通常由一个主菜单，当用户点击主菜单后，会展示出额外的子菜单。具体地，我们将实现以下的效果：
我们在 HTML 中定义了一个简单的菜单结构，如下所示：
-- -------------------- ---- -------
---- -------------
----
-----------
-----------
-------------
-----
--- -----------------
-------------
-------------
-------------
-----
------我们需要在用户点击主菜单时，展现子菜单。具体来说，当用户点击“关于我们”时，应该展现出一个包含 “公司概况”, “组织架构”, “企业文化”的子菜单。我们将对 HTML 结构添加一个 class 来实现这一功能：
-- -------------------- ---- -------
---- -------------
----
-----------
-----------
--- ------------------------------
-----
--- -----------------
-------------
-------------
-------------
-----
------我们在 <li> 标签上添加了 has-sub-menu 类，以指示该主菜单具有子菜单。我们接下来使用 CSS Grid 布局，动态地展现出子菜单。
我们要让子菜单紧贴着主菜单下方，则可以使用 grid-template-rows 属性，将主菜单行高度固定为 50px。我们还要指定子菜单的起始行数，以使其从行 2 开始布局。
.menu {
display: grid;
grid-template-rows: 50px auto; /* 第一行固定高度为 50px，剩余部分自动填充 */
}
.has-sub-menu ~ .sub-menu {
grid-row-start: 2;
}我们使用 ~ 选择器，选择紧接着具有 has-sub-menu 类的元素之后的 .sub-menu 类元素。接着，我们将它们的起始行设为 2，即子菜单从第二行开始展现。
接下来，我们可以将子菜单缩小为一个弹出框，并将其置中于页面，以便于用户点击。我们通过 display:none 规定子菜单默认不可见，并且在点击主菜单时，使用 display:grid 将其呈现出来。
-- -------------------- ---- ------- --------- - -------- ----- --------- --------- ---- ----- ----- ---- ---------- --------------- --- ---------------------- --------- ----- - ------------------- - --------- - -------- ----- -
以上指定了子菜单的样式：相对于菜单的起始位置向下偏移 50px，水平方向置中，宽度为整个页面宽度的 33.33%。我们使用了 repeat() 函数，将子菜单分为三列。之后，我们增加了一个 focus 伪类选择器，当主菜单获得焦点时，呈现子菜单。
示例代码
HTML 代码：
-- -------------------- ---- -------
---- -------------
----
-----------
-----------
--- -------------------- ----------------------
-----
--- -----------------
-------------
-------------
-------------
-----
------CSS 代码：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- ---- ----- - ------------- - --------- - --------------- -- - --------- - -------- ----- --------- --------- ---- ----- ----- ---- ---------- --------------- --- ---------------------- --------- ----- - ------------------- - --------- - -------- ----- -
总结
在本文中，我们展示了使用 CSS Grid 布局实现一个展开式菜单的方案。该布局方法可以被应用于众多网站、应用中的弹出框等场合，是一种非常常见且实用的布局方式。
使用 Grid 布局可以增加你的页面布局的灵活性和可读性，值得你花费时间去学习它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a62e748841e9894886f9c