How to build a custom CMS based layout

[AliSaeed]

Hey Jeff,

Thank you for your input. I seem to have figured it out finally.

Just for everyone’s clarification, here’s how it’s done

1. Place a collection list and turn it into a grid

2. Create the rows and columns (in this case, I created 3row and 3 columns)

3. Set the grid areas in it. This is my areas for this case

4. Then name those areas (these names will then be used in the code script. In this case, I named them first, second, third, fourth, and fifth)

5. Then place an embed and paste this code

<style>

.group-grid div:nth-child(1) {
  grid-area: first;
 }
 
 .group-grid div:nth-child(2) {
  grid-area: second;
 }
 
 .group-grid div:nth-child(3) {
  grid-area: third;
 }
 
  .group-grid div:nth-child(4) {
  grid-area: fourth;
 }
 
   .group-grid div:nth-child(5) {
  grid-area: fifth;
 }

</style>

In Webflow, you would set the area. Then, with the script, you tell Webflow to put the collection items according to the area you set

Hope this helps