Basic Auto-Responsive Grid

The grid automatically adjusts column count based on available space and minimum item width:

3 Columns, 200px minimum width

--grid-auto-columns: 3;
--grid-auto-item-min-width: 200px;
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

4 Columns, 150px minimum width

--grid-auto-columns: 4;
--grid-auto-item-min-width: 150px;
A
B
C
D
E
F
G
H

Custom Gap System

Integration with the existing space system for consistent gap management:

Large Gap (using space variables)

--grid-auto-columns: 3;
--grid-auto-item-min-width: 180px;
--gap-space: var(--space-lg);
Large Gap
Between
Items
Fourth
Fifth

Asymmetric Gaps

--grid-auto-columns: 3;
--grid-auto-item-min-width: 160px;
--gap-space-x: var(--space-xl);
--gap-space-y: var(--space-xs);
Large X
Small Y
Gap Demo
Row Two
Item Five
Item Six

Custom Gap Values

--grid-auto-columns: 2;
--grid-auto-item-min-width: 250px;
--gap-x: 3rem;
--gap-y: 0.5rem;
Custom X: 3rem
Custom Y: 0.5rem
Wide horizontal gaps
Narrow vertical gaps

Responsive Behavior

The grid automatically adjusts when there isn't enough space for the specified column count:

6 Columns with 300px minimum (will adapt to available space)

--grid-auto-columns: 6;
--grid-auto-item-min-width: 300px;
Auto-adapts
To available
Screen width
Fourth item
Fifth item
Sixth item

Try resizing your browser window to see the responsive behavior!

Real-World Use Cases

Common patterns and applications for the auto-responsive grid:

Card Grid Layout

--grid-auto-columns: 3;
--grid-auto-item-min-width: 280px;
--gap-space: var(--space-md);
Product Card
$29.99
Service Card
Contact us
Feature Card
Learn more
Team Member
Developer

Image Gallery

--grid-auto-columns: 4;
--grid-auto-item-min-width: 150px;
--gap-space: var(--space-sm);
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Photo 7
Photo 8

Dashboard Widgets

--grid-auto-columns: 2;
--grid-auto-item-min-width: 350px;
--gap-space: var(--space-lg);
Analytics Widget
Chart and metrics
Activity Feed
Recent updates
Quick Actions
Common tasks
Status Monitor
System health

CSS Variables Reference

Complete reference of available CSS variables for customization:

Required Variables

--grid-auto-columns: [number] /* Maximum number of columns */
--grid-auto-item-min-width: [length] /* Minimum width for each item */

Gap Configuration (choose one approach)

/* Using space variables (recommended) */
--gap-space: var(--space-md) /* Both axes using space scale */
--gap-space-x: var(--space-lg) /* X-axis using space scale */
--gap-space-y: var(--space-sm) /* Y-axis using space scale */

/* Using custom values */
--gap: 1.5rem /* Both axes custom value */
--gap-x: 2rem /* X-axis custom value */
--gap-y: 0.5rem /* Y-axis custom value */

Available Space Scale

var(--space-xs) /* 0.5rem */
var(--space-sm) /* 0.7rem */
var(--space-base) /* 1rem */
var(--space-md) /* 1.3rem */
var(--space-lg) /* 1.8rem */
var(--space-xl) /* 3.2rem */
var(--space-2xl) /* 4.8rem */