CODEWITHSUNDEEP
csscss-grid
Jack Wright
Jack Wright

Reputation: 172

CSS Grid to remove empty, unused space

I am trying to create a nav-bar with the grid property in CSS. All I would like to do is remove empty grid space to make the design look nicer.

Here's what the design initially looks like: enter image description here

I wanted to make it responsive by using the following code:

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

but when I resize the navbar it will dynamically drop a grid object down 1 row, but still keep the width of the grid object constant to the rest. Is there a way I can force the single grid object on the new row to span the width of the entire navbar when it's by itself? In other words, remove all empty space when a new row is created.

Upvotes: 3

Views: 4349

Answers (1)

Temani Afif
Temani Afif

Reputation: 272744

This is more suitable for flexbox than CSS-grid:

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

Upvotes: 1

Related Questions