Kevin Powell - Community•2y ago

Grid col span to the end if a single item exists in a row

Hey guys! I'm looking for a way to span the column of my cell to the end if that's the only item in a row. This is assuming that I have set a fixed number of columns. I have attached a simple illustration in this post. If I have 5 boxes (odd), I want the first 4 boxes (the green one) to occupy one col each and I want the last box (the red one) to occupy 2 cols. However, if I have 6 boxes (even), I want all of them to occupy 1 col each. How can I do this in grid? Or maybe there is another work around using something else? This is my codepen but I can't seem to find the solution https://codepen.io/Sinc02/pen/yLEdxNe

Alvin

CodePen

yLEdxNe

...

2 Replies

Wolle•2y ago

What is your missing part? The selector (maybe :last-child and/or :nth-child()) or the CSS properties? (maybe: grid-column-start/end)

MarkBoots•2y ago

There is some limitation with this, butyou can combine last child and nth child odd. So only if the last child is odd, it will colspan 2

.container > .item:last-child:nth-child(odd){
  grid-column-end: span 2;
}

.container > .item:last-child:nth-child(odd){
  grid-column-end: span 2;
}

Gaming

Programming

Grid col span to the end if a single item exists in a row