Layout utilities and grid patterns

⟩ Basic Grid

Simple grid with gap utilities.

.grid .grid-2

.grid .grid-3

.grid .grid-4

⟩ Auto-fit & Auto-fill

Automatically adjusts columns based on available space (min 280px per item).

.grid .grid-auto-fit

Stretches items to fill available space

.grid .grid-auto-fill

Creates empty columns if space allows

⟩ Responsive Grids

Mobile-first responsive columns. Resize the window to see changes.

.grid-container .grid-cols-2-responsive

1 col → 2 cols at 768px

.grid-container .grid-cols-3-responsive

1 col → 2 cols at 768px → 3 cols at 1024px

.grid-container .grid-cols-4-responsive

1 col → 2 cols at 768px → 4 cols at 1024px

⟩ Column Spanning

Span multiple columns (active at 768px+).

.col-span-2

.col-span-3

.col-span-full

⟩ Row Spanning

Span multiple rows (active at 768px+).

.row-span-2

⟩ Sidebar Layouts

Common page layout patterns (sidebar appears at 1024px+).

.grid-container .grid-layout-sidebar-right

.grid-container .grid-layout-sidebar-left

⟩ Gap Utilities

Control spacing between grid items.

⟩ Flex Utilities

Flexbox helpers for alignment and layout.

.flex .gap-4

.flex-center

.flex-between

.flex-col .gap-2

.flex-wrap .gap-3

⟩ Container Widths

Maximum width constraints for content areas.

⟩ Real World Example

A typical card grid layout using auto-fit.