Streaming live at 10am (PST)

How to assign CSS Grid Areas to CMS items?

Hey there,
I’m creating a CMS portfolio site and will feature a section on the homepage that contains 5-9 thumbnails + title + copy showcasing my work. I’ve tried the masonry grid using lightbox which allows for the thumbnails to vary in height. That’s great, but I’m wondering how to allow the column number to be flexible in each row. So I’d like to have 2 columns in the first row, then 3 in the second and so on. But I’d like to be able to use a collection list to it just populates all the work I want to feature. Is there a way to do this?
Thanks for your help!


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

hi @John-Mark_Warkentin you can achieve your design with use of CSS Grid areas. If you are not familiar what CSS Grid is and how it work here are two article that may help you to understand. But feel free to find more sources in written or video form on internet

Thank you very much!
A follow up question I have is this…
Am I able to combine the the power of CMS Collection lists with the CSS Grid? Or another way to ask this is…am I able to auto populate those rows and columns created with CSS Grid via the Webflow CMS? I’m new to webflow and am just beginning to learn how to set these things up. Thanks!

HI @John-Mark_Warkentin yes it is possible but you need custom CSS to set grid and custom JS to assign each item to Grid Area.

EDIT: I have browse my snippets and here is a simple example

CSS

.my-custom-grid{
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-areas: 
    "Area-1 Area-3"
    "Area-2 Area-3"
    "Area-4 Area-4"
    "Area-4 Area-4";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}

JS

const colListWrapper = document.querySelector(".w-dyn-items");
const totalItems = [...colListWrapper.children];

function assignArea() {
  totalItems.forEach((item, idx) => {
    item.style.gridArea = `Area-${idx + 1}`;
  });
}

function setGrid() {
  colListWrapper.classList.add("my-custom-grid");
  assignArea();
}

setGrid();

Hope that will help