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!



1 Like