Variable Grid Layouts, based on Item Count

Need to vary the way items span your grid, depending on the total number of items being shown?

In Webflow, the number of items in a collection list can vary based on;

• User edits to the data
• Time-based filtering rules, e.g. an upcoming events list filter that shows items "between today and today + 1".

In some cases you may want a layout that can dynamically respond to this situation. If there is 1 item, fill the grid. If there are 2, create two columns, and so on.

For example;

In Webflow, you can achieve this using a grid layout with pure CSS to adjust the item rowspan and colspan.

The advantage to using pure CSS is that this will work inside of the designer as well.

Demonstration

Here's a demo of this technique in action;

https://layout-demos.webflow.io/variable-grid-item-layout

Cloneable;

https://webflow.com/made-in-webflow/website/layout-demos

Setup

Here’s a custom CSS approach for the above example. Adapt this technique to your specific layout and needs.

• Setup your collection list, limit to 3 items.
• Set the collection list element ( middle one ) to a 2x2 grid.
• Change the class name to grid, for this example
• Do not span any cols or rows on the items in the designer, leave them all at the default 1x1, the CSS will do the rest

Drop an Embed element on the page with this CSS style;

<style>
/* 1 element = 2 x 2 */
.grid:has(:nth-child(1):nth-last-child(1)) > * {
  grid-column: span 2;
  grid-row: span 2;
}

/* 2 elements = 1 x 2 each */
.grid:has(:nth-child(2):nth-last-child(1)) > * {
  grid-column: span 1;
  grid-row: span 2;
}

/* 3 elements: 1 x 2 for first */
.grid:has(:nth-child(3):nth-last-child(1)) > * {
  grid-column: span 1;
  grid-row: span 1;
}
.grid:has(:nth-child(3):nth-last-child(1)) > :nth-child(1) {
  grid-column: span 1;
  grid-row: span 2;
}
</style>

The “magic” is in the selector construction, e.g.;

.grid:has(:nth-child(3):nth-last-child(1))

This applies only when “the 3rd child is the last child”, so we know we have 3 children exactly on this element.

Best Practices

Consider responsiveness.

In the CSS, you can use media queries so that you have different layout rules for different breakpoints.

Notes

https://discourse.webflow.com/t/changing-the-design-based-on-the-number-of-cms-items/316130

https://app.excalidraw.com/s/2nMbE9Ldh7X/9TFdFk9vL

‍

‍