Auto Grid Utility

Our auto-grid utility is constructed as follows:

.auto-grid {
display: grid;
grid-template-columns: repeat(var(--auto-grid-method, auto-fill), minmax(var(--auto-grid-min, 16rem), 1fr));
grid-gap: var(--auto-grid-gap, 1rem);


This utility allows developers to create a reusable responsive grid system that is fluid and can adapt across sizes. We have CSS variables to control certain parts of the grid.


Allows us to control whether columns fit the container, or whether they should fill the container. Options are auto-fill or auto-fit. You can read more about these options.


This is where we control how the columns are sized. By default, we set a min of 16rem and a max of 1fr which tells the grid to make sure each column is a minimum of 16rem, and a maximum of 1fr to fit the columns to the container. So when the columns can't fit the container, it'll begin to calculate and make sure the columns are a minimum 16rem. For example, this may give you the functionality depending on container width, where columns are 4 columns on desktop, 2 on tablet and then 1 on mobile. You can also do clever calculations using calc(), e.g:

--auto-grid-min: max(16rem, calc(50% - var(--auto-grid-min)))

This would make sure the minimum size is either 50% of the screen, or 16rem depending on which is bigger!


<ul class="[ feature-grid ] [ auto-grid ]">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
.feature-grid {
--auto-grid-gap: 2rem;
--auto-grid-min: 12rem;

This shows that we're not repeating the same lines of CSS over and over, display: grid etc. We're keeping CSS reusable, with clear separations of concerns.