Go to homepage

Projects /

Auto Sized Grid

A grid layout based on CSS Grid where the columns are automatically created according to a minimum width.

View Demo

How to

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>


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.