Grid

Layout

CSS Grid-based layout system with configurable columns, gaps, and responsive GridItem children supporting explicit placement and spanning

Grid

Responsive grid layout primitives with column counts, spans, breakpoints and dashboard-style compositions.

3-column layout

Start with a simple fixed cols layout for equal-width content blocks.

Card 1

Simple equal-width grid item.

Card 2

Simple equal-width grid item.

Card 3

Simple equal-width grid item.

12-column layout with spans

Use a 12-column grid and GridItem with colSpan and responsive to create header/sidebar/content layouts.

Header (12 columns)Full width

Sidebar

4 columns on desktop, full width on mobile.

Main content

8 columns on desktop, full width on mobile.

Compact dashboard

Combine a header row with metric cards. Each metric uses colSpan + responsive for mobile-friendly dashboards.

Dashboard

123

Metric 1

246

Metric 2

369

Metric 3

492

Metric 4

Usage Guidelines

When to Use

  • Complex 2D layouts
  • Card grids
  • Dashboard layouts
  • Photo galleries

Accessibility

  • Maintains logical reading order
  • Works with screen reader navigation

Performance

  • Uses native CSS Grid
  • No layout thrashing

Common Mistakes

  • Using Grid for 1D layouts (use Stack)
  • Not setting explicit column widths

Frequently Asked Questions

View on GitHub

See the full source code on GitHub

Related Components

View all
Container

Responsive container implementing max-width constraints with fluid padding and automatic centering for consistent content alignment across breakpoints

Masonry

Masonry layout system with configurable columns for Pinterest-style cascading grid layouts

Paper

Material-style elevated surface with shadow variants and glass morphism effects

Section

Semantic HTML5 section wrapper with built-in spacing utilities and accessibility landmarks for document structure organization

Previous

GlassAndIconShowcase

Next

HoverCard