CSS Grid 删除空的、未使用的空间

Question

我正在尝试使用 CSS 中的 grid 属性创建一个导航栏。我想做的就是删除空的网格空间，使设计看起来更漂亮。

这是设计最初的样子: enter image description here

我想通过使用以下代码使其响应:

.nav {
  display: grid;
  grid-gap: .25em;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.nav-child {
  width: 100%;
  text-align: center;
  border: 1px solid black;
}

<div class="secondary-flex nav">
  <div class="secondary-flex nav-child">
    Contact us
  </div>
  <div class="secondary-flex nav-child">
    About us
  </div>
  <div class="secondary-flex nav-child">
    Random
  </div>
  <div class="secondary-flex nav-child">
    More text
  </div>
</div>

但是当我调整导航栏的大小时，它会动态地将一个网格对象向下放置 1 行，但仍然保持网格对象的宽度不变。有没有一种方法可以强制新行上的单个网格对象单独跨越整个导航栏的宽度？换句话说，在创建新行时删除所有空白区域。

Answer 1

这比 CSS-grid 更适合 flexbox:

.nav {
  display: flex;
  flex-wrap:wrap;
}

.nav-child {
  min-width:200px;
  flex:1;
  margin:0.125em;
  text-align: center;
  border: 1px solid black;
}

<div class="secondary-flex nav">
  <div class="secondary-flex nav-child">
    Contact us
  </div>
  <div class="secondary-flex nav-child">
    About us
  </div>
  <div class="secondary-flex nav-child">
    Random
  </div>
  <div class="secondary-flex nav-child">
    More text
  </div>
</div>