Defining a maximum number of grid columns

Design help General
1

Hi,

I’m experimenting with using a grid (container) for elements populated from a CMS collection so that the width of the grid would take 100% of the available width (eg 1 item takes 100% of the container width; 2 items 1/2 w minus one gap, 3 items 1/3 w minus two gaps, etc.)

The elements would be a div filled with an image, so the height of the item would be defined by the height of the image. The goal is to use this type of grid on a template page for a CMS collection with varying number of images in each entry.

I’d like to set ‘3’ as the maximum number of columns for the grid, so that it would only create a second row for a 4th item, a third row for the 7th item, and so on. I can’t find a way to do it—with the grid direction set to ‘column’ it keeps adding columns indefinitely and when set to ‘rows’ it just adds rows.

I hope reading this note is not torture, hard to explain!

THANK YOU!

Read-Only:
https://webflow.com/design/intoto-23c6151aa75347cc5a-38f67fe8eac21?pageId=5e3339959452425786421f62

2 Likes
2

have you already found a solution?
i’m struggling with the exact same issue.

  • jonathan
3

Sadly, no. The grid is great and easy to use once you get it, but it seems you can’t ‘automate’ that layout decision (maybe with custom code?) Good luck, Johnathan.

4

I second this… or third as it seems.
I would like to limit the columns to 2 at portrait breakpoint.
It is breaking to 3 columns for larger devices and I have 4 items which leaves one hanging out all by itself… it may develop a mental condition on certain devices if I can’t resolve… :slight_smile: