使用CSS网格创建导航栏

html5 • • 问答

我正在创建一个用 CSS 网格制作的导航栏。

我决定用网格来制作它，这样我就可以在不修改html 的情况下重新排列部分（项目）（只需修改 CSS）。

然后我创建了包含 3 个区域的网格：徽标、菜单、切换器。

我添加了一点间隙，这样每个项目就不会粘在一起。

到目前为止一切顺利，直到我试图删除一个/某些部分，即使该部分消失了，差距仍然存在。

然后我尝试消除间隙并替换为每个部分的边距。但是边距不会在网格的开始/结束处崩溃。它的行为与常规块元素不同。

我知道使用 flexbox 而不是网格更实用，但我更喜欢网格，因为可以在不修改 html 的情况下重新排列该部分。可以将徽标移动到顶部或其他位置。flex 是不可能的事情。

谁能解决我的网格间隙问题？或者您可能有不同的方法来创建导航栏？

查看我的沙箱：

.navbar {
  background: pink;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: max-content auto max-content;
  grid-template-areas: "logo menus toggler";
  justify-items: stretch;
  align-items: stretch;
  column-gap: 20px;
}

.logo {
  background: green;
  grid-area: logo;
  width: 60px;
}

.menus {
  background: lightsalmon;
  grid-area: menus;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.menus * {
  padding: 5px;
}

.toggler {
  background: lightskyblue;
  grid-area: toggler;
}
<p>navbar with complete sections:</p>
<nav>
  <div>
    LoGo
  </div>
  <div>
    <div>menu-1</div>
    <div>menu-2</div>
    <div>menu-3</div>
  </div>
  <div>
    X
  </div>
</nav>

<hr>

<p>navbar without logo:</p>
<nav>
  <div>
    <div>menu-1</div>
    <div>menu-2</div>
    <div>menu-3</div>
  </div>
  <div>
    X
  </div>
</nav>

<hr>

<p>navbar without toggler:</p>
<nav>
  <div>
    LoGo
  </div>
  <div>
    <div>menu-1</div>
    <div>menu-2</div>
    <div>menu-3</div>
  </div>
</nav>
以上是使用CSS网格创建导航栏的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容