Back to Design System

Grid System

Flexible Bento grid system built with CSS Grid for responsive layouts. Create dynamic, masonry-style layouts for image galleries and content cards.

Grid Fundamentals

CSS Grid provides two-dimensional layouts with precise control over rows and columns. Use Tailwind grid utilities for responsive layouts.

Grid Container

Use grid class to create a grid container

className="grid"

Column Count

Define number of columns with grid-cols-*

grid-cols-3

Gap Spacing

Control spacing between grid items with gap-*

gap-6

Responsive Breakpoints

The Tailwind mobile-first breakpoint system allows different grid layouts at different screen sizes.

Mobile

0px - 639px

(default)

Tablet

768px - 1023px

md:

Desktop

1024px - 1279px

lg:

Large

1280px - 1535px

xl:

Extra Large

1536px - ∞

2xl:

Common Grid Patterns

Equal Columns

Evenly distributed columns at all breakpoints

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
1
2
3
4
5
6

Two Column

Simple two-column layout for content and sidebar

grid grid-cols-1 lg:grid-cols-2 gap-6
1
2

Three Column

Three-column layout for dashboards

grid grid-cols-1 md:grid-cols-3 gap-6
1
2
3

Four Column

Four-column grid for image galleries or cards

grid grid-cols-2 md:grid-cols-4 gap-4
1
2
3
4
5
6
7
8

Bento Grid

Masonry-style grid with varied item sizes

grid grid-cols-2 md:grid-cols-4 gap-4
1
2 (wide)
3
4 (wide)
5 (wide)

Sidebar Layout

Main content area with fixed sidebar

grid grid-cols-1 lg:grid-cols-[250px_1fr] gap-6
1
2

Advanced Grid Techniques

Spanning Columns

Make items span multiple columns using col-span-*

col-span-2
1
2
<div className="col-span-2">Spans 2 columns</div>

Custom Column Widths

Define explicit column widths with bracket notation

200px
1fr (flexible)
200px
grid-cols-[200px_1fr_200px]

Auto-Fit Columns

Automatically fit as many columns as possible within the container

1
2
3
4
5
grid-cols-[repeat(auto-fit,minmax(150px,1fr))]

Code Examples

Responsive Image Gallery

// Bento-style image gallery
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
  <div className="col-span-2 md:col-span-2 row-span-2">
    <img src="/featured.jpg" className="w-full h-full object-cover rounded-xl" />
  </div>
  <div>
    <img src="/image1.jpg" className="w-full h-full object-cover rounded-xl" />
  </div>
  <div>
    <img src="/image2.jpg" className="w-full h-full object-cover rounded-xl" />
  </div>
  <div>
    <img src="/image3.jpg" className="w-full h-full object-cover rounded-xl" />
  </div>
  <div>
    <img src="/image4.jpg" className="w-full h-full object-cover rounded-xl" />
  </div>
</div>

Dashboard Layout

// Dashboard with stat cards
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div className="bg-surface-1 border rounded-xl p-6">
    <h3 className="text-sm text-neutral-strong mb-2">Total Users</h3>
    <p className="text-3xl font-bold text-foreground">1,234</p>
  </div>
  <div className="bg-surface-1 border rounded-xl p-6">
    <h3 className="text-sm text-neutral-strong mb-2">Revenue</h3>
    <p className="text-3xl font-bold text-foreground">$12,345</p>
  </div>
  <div className="bg-surface-1 border rounded-xl p-6">
    <h3 className="text-sm text-neutral-strong mb-2">Active Now</h3>
    <p className="text-3xl font-bold text-foreground">89</p>
  </div>
  <div className="bg-surface-1 border rounded-xl p-6">
    <h3 className="text-sm text-neutral-strong mb-2">Growth</h3>
    <p className="text-3xl font-bold text-foreground">+23%</p>
  </div>
</div>

Best Practices

Do This

  • ✓Start mobile-first, add breakpoints as needed
  • ✓Use consistent gap spacing (gap-4, gap-6)
  • ✓Combine with Flexbox for nested layouts
  • ✓Test layouts at multiple breakpoints
  • ✓Use auto-fit for dynamic content

Do not Do This

  • ✗Avoid overly complex nested grids
  • ✗Do not use grid for simple single-row layouts (use flex)
  • ✗Never use arbitrary grid values without testing
  • ✗Avoid mixing grid systems (stick to one approach)
  • ✗Do not forget to test on real devices