Collections List Items with different column span?

Design help CMS
#1

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)

#2

Nobody? Does really nobody knows if this is possible? Not even the Webflow staff?

#3

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.

Screen Shot 2022-04-08 at 12.09.04 pm
Screen Shot 2022-04-08 at 12.09.04 pm476Ă—708 11.4 KB

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.

#4

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

#5

Thank you, but how does this answer my question if you can span collection items across multiple columns?

#6

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.

#7

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

#8

Is there nobody. Is there really no one who knows if this is possible. Doesn’t even Webflow staff know about it..

1 Like
#9

We all run businesses and have jobs you know :rofl:

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-

  • Create your collection with something easily identifiable as a “featured” flag. I used a boolean switch named Featured?.
  • Create & bind your collection list. Select the center Collection List part ( between the Collection List Wrapper and the Collection Item) and set it to a CSS Grid. Configure your grid however you like.
  • Add an HTML Embed inside of your list item. Type this in;

image

  • Now add another HTML Embed element at the very top or bottom of your page, outside of any collection lists, which will contain your CSS;
<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…

  • Find any Webflow Collection Items [ div.w-dyn-item ]
  • Which contain [ :has() ] a <data> element
  • With an attribute of featured='true'

And then it applies the CSS styling I want, in this case, make my grid item span 2 columns, and 1 row.

1 Like