🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Auto Sized Grid

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

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., [email protected]).

If you need to provide a fallback for older browsers, use the CSS Grid fallback mixin of the framework.

✅ Project duplicated

✅ Project created

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