Responsive Grid

A 12-column grid with six breakpoints. Columns, gutters, and margins scale by viewport width. The grid is Tailwind-native — no additional configuration is needed.

Breakpoints

Name	Value	Tailwind prefix	Context
xs	360px	—	Small mobile
sm	640px	sm:	Large mobile / small tablet
md	768px	md:	Tablet portrait
lg	1024px	lg:	Tablet landscape / small desktop
xl	1280px	xl:	Desktop
2xl	1536px	2xl:	Wide desktop

Grid specification

Breakpoint	Columns	Gutter	Margin	Use case
xs (360–639px)	4	16px	16px	Single-column mobile layouts
sm (640–767px)	4	16px	24px	Wide mobile, compact grid
md (768–1023px)	8	20px	24px	Tablet — 2–3 column patterns
lg (1024–1279px)	12	24px	32px	Desktop — full 12-col available
xl (1280–1535px)	12	24px	48px	Wide desktop
2xl (1536px+)	12	24px	auto (max-width: 1440px)	Capped layout

Common span patterns

Pattern	Tailwind	Description
Full width	col-span-12	Page-level containers, heroes
Two thirds	col-span-8	Main content + narrow sidebar
Half	col-span-6	Paired cards, split layouts
Third	col-span-4	Three-column card grids
Quarter	col-span-3	Four-column stat tiles
Sidebar	col-span-3 / col-span-9	Classic sidebar + content

Code examples

Responsive card grid

<div className="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4 lg:gap-6
  px-4 lg:px-8
">
  {items.map(item => (
    <Card key={item.id} {...item} />
  ))}
</div>

Sidebar + content layout

<div className="
  grid
  grid-cols-1 lg:grid-cols-12
  gap-6
  max-w-[1440px] mx-auto
  px-4 lg:px-8
">
  <aside className="lg:col-span-3">
    <Nav />
  </aside>

  <main className="lg:col-span-9">
    {children}
  </main>
</div>

Guidelines

→Always start with the mobile layout first (grid-cols-1) and layer up with breakpoint prefixes.
→Use gap-4 (16px) as the baseline gutter. Increase to gap-6 on lg+ for breathing room.
→Cap page-level containers at max-w-[1440px] to prevent over-wide content lines on ultra-wide monitors.
→Never mix fixed-pixel widths with grid-based columns — let the grid control horizontal sizing.
→12 columns gives even splits for 2 (6), 3 (4), 4 (3), and 6 (2) items without remainder columns.