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

user_2180189 0
Viewed 1084

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

css-grid css html
2 Answers

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>

user_135368930

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>

user_86203330
Related