Streaming live at 10am (PST)

How to create a Card Grid System like this?


#1

Hello,

How can I create a 4 Card Grid System like this.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

With CMS?

Use 3 Collection lists. 1 for the first post, limited to one post starting at one, then one for the 2 following stacked posts, limited to two starting at two, and one for the last one, limited to one starting at 4.

As for the outer structure, either a div with flexbox or a Columns element for the first row, and a div for the second.

Example: this is a Webflow CMS site that’s using 4 collection lists on home, set to the same collection: http://larochelle.today/


#3

Hi Vincent. I have added all the Data in the CMS but am unable to structure the 4 cards in that fashion.

If you dont mind, can you share a simple project file so that I can take a look at it?


#4

Create a column element, in one column put a collection list and limit it to 1 item, in the other, another collection list, limited to 2 items.

If you know how to create a collection list, then you already know how to craft this layout.


#5

First you should know how to build this layout without CMS

Issue: Flexbox Nested Grids(Google it)

± the idea:
columns : top-level columns container

  • column
    • columns : nested columns
      • column and so on…
    • columns : nested columns
  • column

Old UI (Same idea - almost like your example):

image

collection grid (outdate)


#6

How do I reduce from 3 to 1 item as you suggested?


#7

Connect it to your collection first. Then Go on the Settings tab to explore limiting, filtering and sorting options.


#8

Yes! I got it to work. But now, how do I select a exact particular list item?

EDIT: Never Mind. I got it to work.


#9

I am now unable to reduce the spacing between the 2 and also the alignment of the bottom part is not perfect. How can I fix that?