How to build a custom CMS based layout

[AliSaeed]

Hi guys,

Is it possible to build this custom layout that is also CMS based?

The issue is when I put a CMS in it, it’s all fixed.

And Webflow’s nth-child feature is limited.

Anyway, it can work with code somehow?

[AliSaeed]

Still in need of help. Perhaps this requires code to consume 2 columns instead of one. Anyone can help?

[webdev (Jeff Selser)]

If this is a collection list, you would need to write custom CSS to define the column start and end of individual elements. You could target elements using :nth-child() for example.

See Grid layout using line-based placement - CSS: Cascading Style Sheets | MDN
and
:nth-child() - CSS: Cascading Style Sheets | MDN

[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