How to assign CSS Grid Areas to CMS items?

Design help Layout & Design
1

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!

Screen Shot 2021-09-20 at 5.21.21 PM
Screen Shot 2021-09-20 at 5.21.21 PM1280×2012 106 KB

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

2

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

3

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!

4

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

5

Hi @John-Mark_Warkentin

You can certainly style a CMS collection by styling it as usual in the Designer. Have you tried setting the collection list as a grid element?

To achieve the look you’re after, you’ll need to use Grid Areas. The total space surrounded by four grid lines in CSS grids is called the grid area. A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

You’ll probably need to include custom code here, check out the code snippet below:

.my-grid{
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
grid-template-areas: 
    "1 2"
    "3 4"
    "5 6"
   grid-template-columns: repeat(2, 1fr)
   grid-template-rows: auto auto auto auto;

As you can see here, the grid area template is split into 2 columns and 6 items in total.

Hope this helps

6

HI @Shuib beside that post is one year old what is a major difference between your snippet and snippet I have provided?

7

Hi @Stan , not much difference, I just wanted to avoid copying yours word-for-word which some people don’t like

8

Still didn’t get the point of posting comment with identical solution code but … :roll_eyes:

2 Likes