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

Question

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:

Normal screen:

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.

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

How can I fix it?

Here is a jsfiddle demo

Answer 1

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>

Answer 2

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>