Question

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

Answer 1

这比CSS-grid更适合flexbox：

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

#shinyButton{
    -fx-background-color: 
        #ECECEC,
        linear-gradient(#ECECEC 50%, #D5D5D5 100%),
        radial-gradient(center 50% -40%, radius 200%, #ECECEC 45%, #D5D5D5 50%);
    -fx-background-radius: 10;
    -fx-background-insets: 0,1,1;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}

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

1 个答案: