CSS Grid 是一个新的布局模块，可以快速实现复杂的网格布局。 在这篇文章里，我们将会学习如何使用 CSS Grid 来实现一个导航菜单布局。本文假设你已经了解了 CSS Grid 的基础知识。
为导航菜单布局创建网格
首先，让我们为导航菜单布局创建一个网格。 使用 display: grid 属性来创建一个 CSS Grid，然后将其应用于导航菜单中的列表。我们将使用 repeat 函数来创建五列。 请参阅下面的示例代码：
.nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
}这将创建一个五列的网格，每列的大小相等。我们使用 1fr 作为单位，这将把可用空间等分为五个部分。 fr 单位符号是指可用空间的比例，所以 1fr 将空间分为五个相等的部分。
给列表项分配在网格中的位置
接下来，我们将使用 grid-column-start 和 grid-column-end 属性分配每个列表项的位置。
<ul class="nav"> <li class="nav__item">Home</li> <li class="nav__item">About</li> <li class="nav__item">Services</li> <li class="nav__item">Projects</li> <li class="nav__item">Contact</li> </ul>
.nav__item {
grid-column-start: 2; /* begin in column 2 */
grid-column-end: 3; /* end in column 3 */
}我们使用 grid-column-start 来指定一个项目从哪一列开始，使用 grid-column-end 指定它在哪一列结束。在这个例子中，我们将 Home 的位置分配给第二列。
额外的样式
我们也可以为导航菜单添加额外的样式，例如居中对齐、边框颜色和样式等等。下面是一些示例样式：
-- -------------------- ---- ------- ---- - -------- ----- ---------------------- --------- ----- -------------- ------- ----------- ----- ------- -- -------- -- - ---------- - ------- --- ----- ------ ------------------ -- -- ----- -- ------ - -- ---------------- -- -- --- -- ------ - -- -------- ----- -
现在你已经知道如何使用 CSS Grid 来实现导航菜单布局。这确实是一个非常基础，但是重要的示例，可以应用到其他类似的布局中。 有了这种方法，您可以快速创建任何您想要的导航菜单！
结论
CSS Grid 是一个非常强大的布局模块，让用户能够更好地控制网页的布局。在这篇文章中，我们学习了如何使用 CSS Grid 来实现导航菜单布局。希望本篇文章对您有所帮助，并鼓励您继续深入学习 CSS Grid 的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705e118d91dce0dc8557dcd