Autogrid

The autogrid layout helper provides a way of creating responsive grids of content. It uses the l-autogrid class. Autogrid hints at the browser to help it calculate the number of items on a row and the ideal width of those items. You can see an example on the Amplify home page.

CSS custom properties

--grid-placement

Override the default auto-fill behaviour of the grid, if desired. Refer to this article about auto-fill versus auto-fit for advice and examples.

--grid-min-item-size

Override the settings controlling the minimum width of grid items.

--grid-gap

Override the default spacing between grid items, which is set to 1.25rem (20px).

Considerations

If you are aiming for a certain number of columns to appear at a certain viewport width, here’s how you can get that working:

1. Work out how many gutters (gaps) there will be between the desired number of items in a row. A 3-column grid will have two gutters, for example.
2. Multiply the gutter width (--grid-gap) by the number of gutters.
3. Subtract that figure from the desired viewport width.
4. Divide the result by the number of items in a row.
5. Use that to determine the maximum item width in a CSS clamp() function, which allows you to specify a minimum, preferred and maximum width for items.
6. Use the clamp() function as the value for --grid-min-item-size.

For example:

.l-autogrid[data-layout='thirds'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, #{rem(256)}), 33%, #{rem(350)});
}