Webflow CMS + Class Attribute

This page demonstrates how to leverage the Webflow CMS and the newly unlocked ability to use the class attribute on items, along with the addition of custom properties.

Use Case: Customizing Grid Items

This specific use case showcases how to set specific items in a CMS collection grid to be either tall or wide, altering the amount of space they take up in the grid. The default state, when no wide/tall selection is made, is square. This ensures fallback protection and simplicity.

Background

This implementation is based on a tutorial by Timothy Ricks, adapted from his original version that used custom code and attributes + a CMS attribute value to achieve the same effect. The key advantage of this version is that much of the code remains within the Webflow Designer, which is beneficial in most circumstances.

A note: Demonstration Cards

The cards on this page have some fancy transitions and custom code driving them. They are here primarily for demonstration purposes and to satisfy my need to tinker.

Resources

• Original Tutorial by Timothy Ricks: “Dynamic CMS Grid in Webflow”

• Webflow Update: “Add classes as custom attributes to elements”

• Webflow Update: “Custom CSS properties and values”

‍

Grab the cloneable here: Cloneable Link

Created by: Tony Seets