CSS Grid Layout 是一个强大的前端布局技术，它能够创建复杂的布局结构。在本文中，我们将讨论如何使用 CSS Grid Layout 实现导航栏布局。
导航栏布局
导航栏通常是一个横条，它包含了一个站点中的不同页面链接。通常情况下，导航栏都会固定在页面的顶部或底部。
在 CSS Grid 中实现导航栏布局，我们需要确定以下几点：
- 导航栏的高度
- 导航栏的位置
- 导航栏中各个链接的排列方式
创建导航栏
首先，我们需要创建一个 HTML 结构作为导航栏的容器：
<nav class="navbar">
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>为了使导航栏垂直居中，我们可以使用 Flexbox 或 Grid。在本文中，我们将使用 Grid。
为了使导航栏固定在页面的顶部，我们需要设置 nav 元素的 position 属性为 fixed：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}设置导航栏的高度：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}接下来，我们将使用 Grid 来排列导航栏中的链接。
使用 Grid 布局链接
我们需要将链接放入一个包含在导航栏容器中的 div 中。然后，我们可以使用以下代码为 div 设置 Grid 布局：
.nav-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 60px;
grid-gap: 10px;
justify-content: center;
align-items: center;
}display: grid 表示该元素使用 Grid 布局。grid-template-columns 表示每一行的列数和宽度，其中 repeat(auto-fit, minmax(150px, 1fr)) 表示自适应的列数，最小宽度为 150px，每个列的宽度为 1fr。grid-auto-rows 表示每一行的高度，grid-gap 表示每个单元格之间的间距，justify-content 和 align-items 分别表示水平和垂直方向上的对齐方式。
最后，我们需要为链接设置样式：
-- -------------------- ---- ------- ---------- -- - ----------- ----- - ---------- - - -------- ------ ----------- ------- ---------------- ----- ------ ----- ---------- ----- -
我们将链接的样式设为块级元素，并去掉链接下划线。
示例代码
完整的导航栏代码如下：
-- -------------------- ---- -------
---- ---------------
---- ------------------
----
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
-------- -------------------- ---- ------- ------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- ----- ----------- - --- ---- ------- -- -- ----- -------- ----- - ---------- - -------- ----- ---------------------- ---------------- ------------- ------ --------------- ----- --------- ----- ---------------- ------- ------------ ------- - ---------- -- - ----------- ----- - ---------- - - -------- ------ ----------- ------- ---------------- ----- ------ ----- ---------- ----- -
总结
使用 CSS Grid Layout 实现导航栏布局非常简单。我们只需要设置容器元素的 Grid 布局，并对包含在容器中的链接设置样式。使用 CSS Grid Layout 进行布局，使您能够快速轻松地创建复杂的布局结构，让您的网站看起来更加现代化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c8c65968c7c53b0b8278b