CSS Grid sizing not equally

Question

I'm trying to create the following scenario in a CSS-Grid:
[ header ] - spans full width of first row
[cell] [cell] ... - cells that have a minmax width of 450px until 2 frames fit.

If the browser is stretched, you have more cells horizontally, but if the browser is reduced to only fit 1 cell, it should show:

[header]
[cell]
[cell]
...

I'm not getting it to turn cells into one per row if the width is low enough unless I use @media... tricks. If I don't make [header] span multiple cells, all works correctly though.

Here's my CSS

.grid 
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-gap: 1rem;
    max-width: 1000px;
    margin: auto;
}

.header
{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start:1;
    grid-row-end:1;
}

And here my HTML:

<div class="grid">
    <div class="header">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
    </div>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
    </div>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
    </div>
</div>

If I ommit the .header CSS all works fine, except that the header cell is not divided over 2 cells, but resizing works great. If I use .header, and I make it small, the first cell is always kept at 450px and the cell next to it becomes very small until eventually I get a scrollbar.

How can I fix this using pure CSS-Grid alone?

score 1 · Accepted Answer · answered Jun 09 '20 at 22:05

You should consider -1 for grid-column-end. When using 3 you will force the grid to always create 2 columns but using -1 you will instruct the grid to always end at the last column (the number of columns will be based on the template)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  grid-gap: 1rem;
  max-width: 1000px;
  margin: auto;
}

.header {
  grid-column-start: 1;
  grid-column-end: -1;
}

<div class="grid">
  <div class="header">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
  </div>
</div>

Wow, it was that easy huh!!! Thank you so much. :) This totally did it. I did try 2, 9 and and 1, but only 3 seemed to yield the desired result. All documentation I read did not mention -1 was an option. Learned something. Awesome. — LPChip, Jun 09 '20 at 22:15
@LPChip related question to get more details: https://stackoverflow.com/a/57271867/8620333 — Temani Afif, Jun 09 '20 at 22:20

CSS Grid sizing not equally

1 Answers1