Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
3 replies
Daddyzilla

Spanning columns using CSS Grid

I don't think what I am attempting to do is possible. Based on the hours of reading I've done (CSSTricks, StackOverflow, etc), whenever we are spanning columns with CSS Grid, the grid-column-start MUST be specified. In my case, I would like a particular cell to span to the the last line, regardless which line/column it falls into. Here is some styling:

.Grid-Container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.Grid-Column-Span-To-End {
    grid-column-end: span -1;
}

As far as I can tell, this is not possible. The above seems to be ignored.

If, on the other hand I did this:

.Grid-Column-Place-End {
    grid-column-end: -1;
}

That will force that cell to be placed at the end. Which is better than nothing. But is not really what I want to achieve as it then leaves a potential gap of empty cells before it (not a dense grid).

All the spanning examples I found online, they specified both a start and ending line. Where I did find something reasonably close to what I am after, it was a bug report or suggestion. So clearly I am not the only person that wants to do something like this.

Thanks in advance. And I won't mention the K word, because I don't want to get booted. 🙂

cheers!
Was this page helpful?