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).