Variable Collection Item Sizes in a Grid Layout

Do you have a Collection list laid out as a CSS grid, and you want to make some items larger than others?

Whether it's featured posts, sponsored posts, or product specials, sometimes you want an individual CMS item to span multiple columns or rows in your grid.

Let's look at two approaches;

First CMS item larger only

In early 2024, Webflow added a new feature that supports custom styles directly in the designer style panel.

CMS Item-specific sizing

More complex scenarios require slightly more creative solutions.

Here's how you can.

Resources

• Cloneable demo site

References

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

‍

‍

‍