Using first item to change the grid layout of a CMS collection item

Hello Web-flowers,

I’m having trouble with something that seems like it should be super straightforward:

I’ve created a grid layout from collection items; 5 items in a 2 column grid.
I want the first item in the collection to span 2 columns, all other items should just span 1 column.
Should look something like this:

I assumed I would now be able to use the first child selector for the collection grid to just change the first item to span 2 column. But for some reason, doing this just affects all items in the collection, so everything spans 2 columns.

I’ve also tried to add the following custom code in an embed to get achieve this but that is also not working:

.grid-item .w-dyn-item: first-child {
grid-column-start: span 1;
grid-column-end: span 2;
}

This feels odd to me, surely this is just the kind of thing the first child selector is for, am I just doing something wrong?


Here is my site Read-Only: LINK

Running into the same issue. This should work… did you ever figure out why it wouldn’t work??

Bumped into this issue today and have deadline on this project Sunday. :grimacing:
Did you find a solution?
Thx

@Oli_Ingram 's approach is the same technique I use, however I don’t think the first-child CSS pseudoselector will work with that space after the :. The way Oli write the code above, the rule directs the browser to try to find a sub-element named <first-child> inside of the item with the .w-dyn-item class.

Soz, Oli, just saw this. I might have saved you some grief.

Here’s an article I did on a similar CSS grid span situation, for featured items.

Thank you, what a nice write up, it worked really well!