How to create a Card Grid System like this?

Design help General
1

Hello,

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

image
image932×820 307 KB

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?

image
image650×526 18.9 KB

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?

image
image1141×678 261 KB