Kevin Powell - Community•2y ago

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;
}

.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;
}

.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!

2 Replies

Rägnar O'ock•2y ago

what you want is a "span to end" behavior and it is explicitly not supported by the CSS Grid specification because it could cause infinitely recursive layout shifts. you could do it with a bit of JS to figure out how many columns are available in any give directions and set the grid-[row|column]-[start|end] accordingly

DaddyzillaOP•2y ago

Thank you for your response and suggest. Although I will probably just let it go. I've learnt over time that if you try to stick a square peg into a round hole, eventually it ends in tears. Best to stick with square pegs/holes or round pegs/holes. So we'll just let it go this time. The boss-man will learn to like the new design 🙂 The flexibility CSS Grid gives him on mobile devices, far out-weights his desire to span cells. cheers!

Gaming

Programming

Spanning columns using CSS Grid