CSS Grid 是一种强大的布局方式，它允许您以一种直观的方式在网页上创建复杂的布局。在本文中，我将向您展示如何使用 CSS Grid 制作漂亮的导航菜单。让我们开始吧！
1. 创建 HTML 结构
首先，我们需要创建一个基本的 HTML 结构，以便将来使用 CSS Grid 布局。在这个示例中，我们将创建一个包含 5 个导航链接的菜单。
<nav class="nav-menu"> <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Services</a> <a href="#">Blog</a> <a href="#">Contact Us</a> </nav>
2. 基本的 CSS 样式
接着，我们需要添加一些基本的 CSS 样式，以便能够看到这些链接在网页上。
-- -------------------- ---- ------- --------- - -------- ----- ---------------------- --------- ----- ------------------- ---- --------- ----- -------- ----- ----------------- -------- - --------- - - -------- ------ ----------- ------- ------ ----- ---------------- ----- ----------- --- ---- ----- - --------- ------- - ----------------- ----- ------ ----- -
这些样式将创建一个基本的菜单，并为每个链接添加样式。如果您在网页上查看这个 HTML，将会看到所有链接在水平方向上排列，并且每个链接之间有间隔。
3. 添加 Grid 样式
现在，我们将使用 CSS Grid，将这些链接排列在网格中。
首先，我们需要设置 nav-menu 元素为 Grid 容器，然后我们需要定义 Grid 的列和行网格。我们想要创建一个具有 5 列和 1 行的网格，因此我们可以使用 repeat() 函数来定义 5 列：
.nav-menu {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
grid-gap: 10px;
padding: 20px;
background-color: #f0f0f0;
}现在，我们需要让每个链接显示在网格里。为此，我们可以为每个 a 标签添加网格位置属性：
-- -------------------- ---- ------- --------- -------------- - ------------ ---- - --------- -------------- - ------------ ---- - --------- -------------- - ------------ ---- - --------- -------------- - ------------ ---- - --------- -------------- - ------------ ---- -
这里，我们使用 nth-child() 选择器，选择每个链接，并为其设置网格列。我们在这里使用的是 1/2，2/3，3/4，4/5 和 5/6，这表明每个 a 元素将占据相应列的位置。例如，第一个链接将占据网格容器中的第一列。
1 2 3 4 5 [ a ][ a ][ a ][ a ][ a ]
我们也可以将这个样式更简洁地写成如下代码：
-- -------------------- ---- ------- --------- - - ------------ ---- -- - --------- -------------- - ------------------ -- - --------- -------------- - ------------------ -- - --------- -------------- - ------------------ -- - --------- -------------- - ------------------ -- - --------- -------------- - ------------------ -- -
这里，我们首先将所有 a 标签的网格列属性设置为“span 1”，然后为每个链接的起始列添加网格列起始属性。这种方法更简洁，易于阅读和维护，因为我们可以对网格容器进行更改，而不需要对每个链接进行更改。
4. 添加响应式布局
最后，如果你想要你的导航菜单在不同屏幕大小上都能正常显示，那么你可以添加一些媒体查询。这些媒体查询将为不同屏幕大小定义不同数量的列，以便菜单能够在不同屏幕大小上进行布局。
-- -------------------- ---- -------
------ ----------- ------ -
--------- -
---------------------- --------- -----
-
--------- ---------------- -
------------ ---- --
-
-
------ ----------- ------ -
--------- -
---------------------- ----
-
--------- - -
------------------ -----
-
--------- ---------------- -
--------- ---- --
-
-这些媒体查询将在屏幕宽度小于 768px 和 480px 时分别应用。在屏幕宽度小于 768px 时，我们将菜单分为两列，从而使菜单可见。在屏幕宽度小于 480px 时，我们将菜单调整为一个列，并在第二个链接处将其分为两行。
5. 示例代码
<nav class="nav-menu"> <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Services</a> <a href="#">Blog</a> <a href="#">Contact Us</a> </nav>
-- -------------------- ---- -------
--------- -
-------- -----
---------------------- --------- -----
------------------- ----
--------- -----
-------- -----
----------------- --------
-
--------- - -
-------- ------
----------- -------
------ -----
---------------- -----
----------- --- ---- -----
------------ ---- --
-
--------- ------- -
----------------- -----
------ -----
-
------ ----------- ------ -
--------- -
---------------------- --------- -----
-
--------- ---------------- -
------------ ---- --
-
-
------ ----------- ------ -
--------- -
---------------------- ----
-
--------- - -
------------------ -----
-
--------- ---------------- -
--------- ---- --
-
-结论
在本教程中，我们学习了如何使用 CSS Grid 制作漂亮的导航菜单。我们从创建基本的 HTML 结构和样式开始，然后转移到使用 CSS Grid 布局将链接排列在网格中。最后，我们添加了一些媒体查询来使菜单在不同屏幕大小上进行布局。我希望这篇文章能够帮助你学习 CSS Grid，并使你更加熟练地使用它来创建更复杂的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67492d21a1ce00635444f6c7