Kevin Powell - Community•2mo ago

Grid layout - make last item span to the last column

I was thinking if there was a way to make dynamically the last element in a given grid to span to the last column of at the end there are some empty slots. I know that using

grid-column: span x:

grid-column: span x:

But this only works when we know x but now we don't know x. I also thought of using

grid-column-end: -1;

grid-column-end: -1;

But this one moves the element to the end without spanning it allover. Is there a way to do this for grid element like with flex-grow:1 for flex elements.

18 Replies

lko•2mo ago

How do you do not know how much x is? Are you using auto-fit/fill?

VickOP•2mo ago

Let say you have a parent with 2 columns When you get an even number of children there will not be left space But in case of odd number of children there will be one empty slot for the last row... For this case for even case x will be 0 and 1 for odd case

lko•2mo ago

If that's the usecase, then, can't you do something like this?

.parent > :last-child:nth-child(odd) {
  grid-column: -1/1;
}

.parent > :last-child:nth-child(even) {
  /* nothing */
}

.parent > :last-child:nth-child(odd) {
  grid-column: -1/1;
}

.parent > :last-child:nth-child(even) {
  /* nothing */
}

This works of course assuming the parent always has 2 columns

VickOP•2mo ago

I'm going to check this but I think in case the number of cols is no longer 2 this wouldn't work well...

VickOP•2mo ago

I have illustrated the requirement at the following address: https://github.com/vickbk/vickbk.github.io/tree/main/frontend/grid-span Here is a live preview of what is expected: https://vickbk.github.io/frontend/grid-span/

GitHub

vickbk.github.io/frontend/grid-span at main · vickbk/vickbk.github.io

github page repo. Contribute to vickbk/vickbk.github.io development by creating an account on GitHub.

lko•2mo ago

@Vick, something like this works

.gc-2 article:nth-child(2n + 1):last-child {
  grid-column: span 2;
}

.gc-3 article:nth-child(3n + 1):last-child {
  grid-column: span 3;
}

.gc-3 article:nth-child(3n + 2):last-child {
  grid-column: span 2;
}

.gc-4 article:nth-child(4n + 3):last-child {
  grid-column: span 2;
}

.gc-2 article:nth-child(2n + 1):last-child {
  grid-column: span 2;
}

.gc-3 article:nth-child(3n + 1):last-child {
  grid-column: span 3;
}

.gc-3 article:nth-child(3n + 2):last-child {
  grid-column: span 2;
}

.gc-4 article:nth-child(4n + 3):last-child {
  grid-column: span 2;
}

And yes, it works only if you know how many columns you have

VickOP•2mo ago

Yes ofcourse I'm looking for a way of not keeping track of the number of cols I initially thought it's must be there somewhere 🤔 😂 A cool

grid-grow: 1;

grid-grow: 1;

😎

lko•2mo ago

No I dont think there's a way to do that

curiousmissfox•2mo ago

This may help give you some ideas https://youtu.be/ZDFgJeQOn20?si=9pN4pYKDHl7YNuLd

Kevin Powell

YouTube

A CSS Trick to select a specific row with Grid auto-fit/fill

Looking to step up your CSS Game? Check out https://cssdemystified.com 🔗 Links ✅ Code for last row only: https://codepen.io/kevinpowell/pen/ogjwxyv/19639a71b6ff26e1bf87738fa6db12d5 ✅ Code for first two rows only: https://codepen.io/kevinpowell/pen/vENZGvG/14a4bdacb2fa79bbdd9cd1e400b57097 ✅ Code for 2nd row only: https://codepen.io/kevi...

Martin Bavio•2mo ago

if you know the width of your grid column you might also be able to figure it out via container queries?

VickOP•2mo ago

I found a way to fix it with the new sibling-index() currently supported in chromium browser only but for a full grid it is breaking the design:

// for a 2 cols grid
.gc-2.span-last-element > *:last-child {
    border: 2px solid red;
    grid-column: mod(sibling-index(), 2) / -1;
}

// for a 3 cols grid
.gc-3.span-last-element > *:last-child {
    border: 2px solid red;
    grid-column: mod(sibling-index(), 3) / -1;
}

// for a 2 cols grid
.gc-2.span-last-element > *:last-child {
    border: 2px solid red;
    grid-column: mod(sibling-index(), 2) / -1;
}

// for a 3 cols grid
.gc-3.span-last-element > *:last-child {
    border: 2px solid red;
    grid-column: mod(sibling-index(), 3) / -1;
}

Also in case the some elements in the grid are spanning multiple columns the design can also get broken. Live demo: only working in latest chromium browsers

Chris Bolson•2mo ago

If you know the number of columns, as per your code, this is relatively simple as lko showed you a couple of days ago, without the need for sibling-index() or mod()

VickOP•2mo ago

yeah... I will stick to it

Chris Bolson•2mo ago

I actually created a demo similar to your idea a couple of weeks ago, using container queries (though it could equally be media queries) to define the number of columns and then a single mod(sibling-index()) calculation to define the start position of the final cell. (in my demo I wanted the final cell to expand the remaining columns on the last row)

grid-column: calc(mod(sibling-index() - 1, var(--columns)) + 1) / -1;

grid-column: calc(mod(sibling-index() - 1, var(--columns)) + 1) / -1;

Chris Bolson

CodePen

Using mod() & @container query to make last cell span remaining gri...

This demo shows how we can use container media queries and the new mod() function to make the last cell to span the remaining columns in the grid...

VickOP•2mo ago

Works exactly as I was thinking... but either of our solutions are suffering if some other element span more than one column

MarkBoots•2mo ago

yea, that would be difficult to figure out the column index when there are items that span. think you would need some js for that here an example https://codepen.io/MarkBoots/pen/emJREML?editors=1111

MarkBoots•2mo ago

VickOP•2mo ago

Beautiful until our last-span property comes out

Gaming

Programming

Grid layout - make last item span to the last column

Did you find this page helpful?