Foundations

Grid & Layout

A 12-column grid with responsive gutters and named column templates for common photography layouts. Containers cap the content width; the grid gutters scale with the viewport.

Breakpoints

Mobile-first. Add a breakpoint prefix to any Tailwind utility — e.g. md:grid-cols-3. The xs breakpoint is custom-added for small phones.

xs:
sm:
md:
lg:
xl:
2xl:
xsxs:360px

Small mobile

smsm:640px

Large mobile / small tablet

mdmd:768px

Tablet portrait

lglg:1024px

Tablet landscape / small desktop

xlxl:1280px

Desktop

2xl2xl:1440px

Wide desktop — photography site max

Containers

Use container for the responsive centered container, or max-w-container-* to pin a specific max-width.

--container-smmax-w-container-sm640px

Prose, narrow forms

--container-mdmax-w-container-md768px

Content articles

--container-lgmax-w-container-lg1024px

Standard page layout

--container-xlmax-w-container-xl1280px

Dashboard, wide layouts

--container-2xlmax-w-container-2xl1440px

Photography site — primary

--container-fullw-full100%

Edge-to-edge, hero images

Gutters

The --gutter variable updates automatically via media queries. Use gap-gutter to always get the responsive gutter.

--gutter-xsgap-gutter-xs16px

Mobile

--gutter-smgap-gutter-sm24px

sm

--gutter-mdgap-gutter-md32px

md–lg (default)

--gutter-lggap-gutter-lg48px

lg–xl

--gutter-xlgap-gutter-xl64px

xl–2xl

Column Templates

Named grid-template-columns values. Apply with grid grid-cols-[name]. The gallery templates are used directly in PhotoRow and PhotoGrid.

grid-cols-12

Standard 12-column layout grid

Page layout, sidebars, dashboards
62%
38%
grid-cols-gallery-2

Wide + Narrow (62 / 38)

Photo row 1 & 4
38%
62%
grid-cols-gallery-2-flip

Narrow + Wide (38 / 62)

Photo row 4 (mirrored)
33%
33%
34%
grid-cols-gallery-3

Three equal columns

Photo row 2
45%
30%
25%
grid-cols-gallery-3-var

Three varied (45 / 30 / 25)

Photo row 7
25%
25%
25%
25%
grid-cols-gallery-4

Four equal columns

Photo row 5
20%
80%
grid-cols-sidebar

260px sidebar + fluid content

Docs layout, admin panels
80%
20%
grid-cols-sidebar-right

Fluid content + 260px sidebar

Article with TOC

Usage example

{/* 12-column page layout */}
<div className="grid grid-cols-12 gap-gutter">
  <aside className="col-span-3">...</aside>
  <main  className="col-span-9">...</main>
</div>

{/* Responsive gallery row */}
<div className="grid grid-cols-1 md:grid-cols-gallery-2 gap-gallery h-[300px]">
  <PhotoCard ... />
  <PhotoCard ... />
</div>