CSS网格删除空的，未使用的空间

杰克·赖特

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

我想通过使用以下代码使其具有响应性：

.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行，但仍将网格对象的宽度保持不变。有没有办法强迫新行上的单个网格对象单独覆盖整个导航栏的宽度？换句话说，在创建新行时，请删除所有空白区域。

陪同Afif

这比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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。