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

Grid uses CSS Grid for 2D layouts with rows and columns. Stack uses Flexbox for 1D layouts (vertical or horizontal).
Yes, Grid supports responsive column configurations that change based on screen size breakpoints.

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