如何制作子导航栏两到三列答案

【问题标题】：How to make sub navbar two to three columns如何制作子导航栏两到三列
【发布时间】：2021-06-08 14:36:33
【问题描述】：

您好，我正在尝试克隆 cointelegraph.com 的导航栏，但是，我不擅长 CSS，这是我正在尝试完成的事情的照片cointelegraph

Protrada

目标是当用户悬停导航栏而不是完整的下拉菜单时，子类别将分为三个。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： css wordpress responsive-design themes navbar

【解决方案1】：

您可以尝试使用 CSS 网格。这会将导航项目定位到三列网格中

nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<nav>
  <a href="">Item 1</a>
  <a href="">Item 2</a>
  <a href="">Item 3</a>
  <a href="">Item 4</a>
  <a href="">Item 5</a>
  <a href="">Item 6</a>
</nav>

【讨论】：