How to build a custom CMS based layout

Community resources General
4

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

Screen Shot 2022-07-15 at 9.03.52 PM
Screen Shot 2022-07-15 at 9.03.52 PM484×686 32.1 KB

  1. 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)

  2. 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 :slight_smile:

4 Likes