Auto Sized Grid
A grid layout based on CSS Grid where the columns are automatically created according to a minimum width.
Projects /
Projects /
A grid layout based on CSS Grid where the columns are automatically created according to a minimum width.
This Auto-sized Grid component is a (smart) responsive grid that automatically determines the number of columns (no CSS media queries required). On resize, the grid adds/removes columns according to the --col-min-width value.
The component is based on CSS Grid.
This component is compatible with CodyFrame's grid system: it supports the .gap utility classes of the framework. However, you shouldn't use the .col classes on the grid-items, or they will break the Auto-Sized Grid features.
The component includes the following utility classes:
.grid-auto-xs { --col-min-width: 8rem; }
.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }You can update these classes at different breakpoints using the .grid-auto-{size}@{breakpoint} utility classes (e.g., grid-auto-md@md).
If you are using Tailwind CSS, you can modify the min width of the columns changing the grid-cols-[*] utility class. By default, the min width is set to 15rem:
<ul class="grid gap-6 grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]">
<li><!-- ... --></li>
<li><!-- ... --></li>
</ul>
