Streaming live at 10am (PST)

Defining a maximum number of grid columns


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!




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

  • jonathan

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.

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: