Collection Lists & CSS Grid Spans

Make Specific CMS Items Span Larger Areas

CSS Item Spans

See the article here, explaining the technique I've used to do this.

Expand specific CMS items so that they span multiple columns or rows in you CSS grid.

  • + Easy to implement.
  • + CSS-only, no code needed.
  • + Supports both row and column spans, or both simultaneously.

DEMO

This CMS Collection List is configured to use a CSS Grid layout. Some of the items in the CMS are marked as Featured, and we want these to span 2 columns and 1 row.

The History Of Web Design
February 11, 2023
14 Common Misconceptions About Web Design
March 16, 2022
7 of the Best Examples of Beautiful Blog Design
July 18, 2022
10 Web Design Blogs You Can't Miss
May 3, 2022
10 Great Examples of Responsive Websites
June 7, 2022
5 Web Design Blogs You Should Be Reading
June 14, 2022
5 Great Web Design Resources
May 26, 2022
How to improve Web Design Process
October 20, 2022
10 Things Nobody Told You About Being a Web Designer
August 29, 2022
20 Myths About Web Design
February 4, 2023

How to implement

See the designer view of this page by clicking the button at the top.
Further notes & script examples are in the CodePen.

Also, see a video demonstration of the setup for reference.

See the Pen Webflow | Test Element Filtering by Michael Wells (@memetican) on CodePen.