Kevin Powell - Community•2mo ago

Odd number of cards

If I have a 2 column layout with an unknown number of cards, how would I make the last one spans the two columns if the space is empty? Going a step further, if as in some of Kevins tutorials I had some feature` cards that span 2 columns, how would I ensure the last card spans 2 columns if there is space? Many thanks

8 Replies

MarkBoots•2mo ago

for your first question, if the last child is odd (in a 2 column grid)

.card:last-child:nth-child(odd){
  grid-column-end: span 2
}

.card:last-child:nth-child(odd){
  grid-column-end: span 2
}

Alex•2mo ago

I think you can achieve both results with the following:

.card:last-child {
grid-column-end: -1
}

.card:last-child {
grid-column-end: -1
}

If there are an even number of cards, or an even number of cards in the last row, this won't affect anything, because the last-child will already end at -1, but if it's a singleton, this will make it span all remaining columns.

londonpete_harrisonOP•2mo ago

I`ll give the a try

MarkBoots•2mo ago

@londonpete_harrison i visited back the second part of your question, and i think i came up with a selector that might work for you. It's quite a big one and does rely on the :has selector

/* if there are no featured cards and the total cards is odd */
.card:first-child:not(.featured):not(:has(~ .featured)) ~ .card:last-child:nth-child(odd),
/* if the last featured card is an even card and total cards is odd */
.featured:nth-child(even):not(:has(~ .featured)) ~ .card:last-child:nth-child(odd),
/* if the last featured card is an odd card and total cards is even */
.featured:nth-child(odd ):not(:has(~ .featured)) ~ .card:last-child:nth-child(even)
{
  grid-column-end: span 2;
}

/* if there are no featured cards and the total cards is odd */
.card:first-child:not(.featured):not(:has(~ .featured)) ~ .card:last-child:nth-child(odd),
/* if the last featured card is an even card and total cards is odd */
.featured:nth-child(even):not(:has(~ .featured)) ~ .card:last-child:nth-child(odd),
/* if the last featured card is an odd card and total cards is even */
.featured:nth-child(odd ):not(:has(~ .featured)) ~ .card:last-child:nth-child(even)
{
  grid-column-end: span 2;
}

here you can test it out https://codepen.io/MarkBoots/pen/YzmwaJr?editors=1100

Mark Boots

CodePen

Untitled

...

Alex•2mo ago

This is completely unnecessary though. It doesn't matter whether it's odd or even or whether there are featured cards elsewhere, that's a distraction, and selecting for it makes your code harder to read, raises specificity and lowers browser support. All you actually want is for the last card to span the width if its a standalone, so just make the last card end at the last column line. As an exercise, it's interesting, and the solution you've come up with is cool, but for production, it's overkill.

MarkBoots•2mo ago

only setting grid-column-end: -1 does not work. It will not span the item over the columns, it will just place it at the last column

MarkBoots•2mo ago

Alex•2mo ago

Ah damn, well there goes my theory! 😅 apologies, this is what I get for answering on my phone and not testing my theories

Gaming

Programming

Odd number of cards