Is it possible to define collection list items that span over two or three columns to give featured items more real estate?
EDIT: I know, I can define the first list item, the last list item, and every second list item. But I need the list item to span over two columns no matter what position it has. Based on a toggle in the cms.
Here is my public share link: LINK
(how to access public share link)
Nobody? Does really nobody knows if this is possible? Not even the Webflow staff?
Hi @downtownberlin - can hopefully help, however as this is a community forum sometimes a bit of patience is needed.
The way that I’d achieve this is by dropping in individual Collection List elements - then setting the first one to be that 2-3 columns or spacing your after, while the second can be the usual one column.
Can then use the limits/filters to say i.e. limit this to 1 item and always the first one, or alternatively implement a toggle into the collection then you can say you only want the toggle to be in that 2-3 column spread.
A bit more manual work, but should work as you want it and still have the automation that new items still trickle down (if not toggle on) or always go to that feature area.
hi @downtownberlin as text columns are mostly used for dividing large text into newspaper like columns you may use CSS Grid. It is up to you.
I will suggest to visit WFU to learn how to work with this platform
Thank you, but how does this answer my question if you can span collection items across multiple columns?
Thanks. For defining/styling the first, the last, or every second item differently there is already a built-in functionality in Webflow. But this does not solve my requirements. I need the list item span over two columns no matter on what position it is. Based on a toggle in the cms.
I have the same issue, I haven’t found the way, even though I select Last Item to span to 2 columns, it gets applied to the whole collection so is no different from the rest of the items
Is there nobody. Is there really no one who knows if this is possible. Doesn’t even Webflow staff know about it..
We all run businesses and have jobs you know 
Yes, this can be done, and no script is required. CSS grids are CSS, so it’s not hard to adjust and target your item layouts. Here’s a demo I whipped up, and the project read-only link.
I randomized the list order for kicks, but you can sort it however you like.
The basic approach is this-
Featured?.
<style>
div.w-dyn-item:has(data[featured='true']) {
-ms-grid-column: span 2;
grid-column-start: span 2;
-ms-grid-column-span: 2;
grid-column-end: span 2;
-ms-grid-row: span 1;
grid-row-start: span 1;
-ms-grid-row-span: 1;
grid-row-end: span 1;
}
</style>
If you’ve done it right, you’ll immediately see your new layout behavior, even while working in the designer.
WAIT, WHAT MAGIC IS THIS?
This is a very simple but powerful technique, and it’s a workaround I use a lot in Webflow.
When you have a piece of CSS that you want to target specifically to certain elements, you can target elements with specific attributes, using CSS’s attribute selectors. That means if you can put e.g. featured="true" on your list item, you can target your CSS to it.
Unfortunately, Webflow does not yet give us a way to dynamically set custom attributes on Collection List Items, but it does let us put HTML embeds in our Collection List Items. With those HTML Embeds, we can create an arbitrary hidden element with our CMS-sourced custom attribute.
Then to target our collection list item, we use another piece of CSS selector magic, the :has() pseudoselector. This allows us to match elements whose contents match another rule.
I’m using these 3 things together to achieve whatever dynamically-targeted CSS magic I want to achieve. And yes, you can use a similar approach to target jQuery.
Here’s how I’ve applied these principles here;
I’m using an HTML embed to “attach” our Featured? flag data to our collection list item by creating a identifiable element, with our data as an attribute, e.g.;
<data featured="true"></data>
DATA elements work great, because they’re distinctive, and invisible without contents. But now we have something our CSS selector can match.
This CSS selector matches it with
div.w-dyn-item:has(data[featured='true'])
Which says…
div.w-dyn-item ]:has() ] a <data> elementfeatured='true'And then it applies the CSS styling I want, in this case, make my grid item span 2 columns, and 1 row.
@memetican Hi Michael, this is an amazing solution to a problem I have but I haven’t gotten it to work yet. I’ve tried implementing this approach as well as the variation from: https://variable-collection-list-item-layouts.webflow.io/. Initially, I just had two collection lists, one with my featured card, and one for the others. But I need to have the featured card as a part of my filter results. I’ve left both lists published so you can see what I mean.
Any chance you could take a look and tell me where I’ve gone wrong?
Page: Press (Filter)
Hey Evan, you’ve got some CSS overriding your colspan. Try this;