CODEWITHSUNDEEP
htmlcsscss-grid
MightyPork
MightyPork

Reputation: 18861

CSS grid auto-fill and full-width cell - empty columns

I'm trying to build a CSS layout with one or two columns (depending on page width), and a full-width "navbar" above them. I don't want to use a media query, if possible.

* { word-wrap: break-word; }

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

nav {
  grid-column: 1 / -1;
}

/* only for visualisation */
#grid > * { margin: 5px; }
.col { border: 1px dashed black; }
nav { border: 1px solid blue; }
#grid { border: 1px solid red; }
<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

Narrow screen:
narrow

Normal screen:
enter image description here

However, it decides to add a third or even more empty columns if the screen is too wide. I can sort of fix it by increasing the min value in minmax, but then it overflows when the page is too narrow.

too wide

This glitch does not happen if I remove the full-width cell.

How can I fix it?

Here is a jsfiddle demo

Upvotes: 2

Views: 2068

Answers (2)

Temani Afif
Temani Afif

Reputation: 272657

this is a flexbox job:

* {
  word-wrap: break-word;
}

#grid {
  display: flex;
  flex-wrap:wrap;
  gap:10px;
  border: 1px solid red;
}

nav {
  width:100%;
  border: 1px solid blue;
}

.col {
  border: 1px dashed black;
  flex-basis:300px;
  min-width:0;
  flex-grow:1;
}
<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

Upvotes: 1

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

You can simply increase the minmax width here repeat(auto-fit, minmax(300px, 1fr)) from 300px to 450px but this will cause the layout to shrink into two rows to early but in full screen will fit into it so if you don't have any problem with the shrinking to early just the bellow

Example

* {
  word-wrap: break-word;
}

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  border: 1px solid red;
  grid-gap: 10px;
}

nav {
  grid-column: 1 / -1;
  border: 1px solid blue;
}

.col {
  border: 1px dashed black;
}
<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
But if you don't like the early shrinking the only best possible way to achieve it in ride into media queries by detecting the screen size that you want your layout to shrink into two rows then there put repeat(1, minmax(300px, 1fr)); to respect one column otherwise use repeat(2, minmax(300px, 1fr)); for two columns.

And also by that way you can easily set the minmax to zero like repeat(2, minmax(0, 1fr)); which will look great when the screen is too small

Example

* {
  word-wrap: break-word;
}

#grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  border: 1px solid red;
  grid-gap: 10px;
}

nav {
  grid-column: 1 / -1;
  border: 1px solid blue;
}

.col {
  border: 1px dashed black;
}

@media (max-width: 750px) {
  #grid {
    grid-template-columns: repeat(1, minmax(300px, 1fr));
  }
}
<div id="grid">
  <nav>full width nav</nav>
  <div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

Upvotes: 1

Related Questions