Skip to content →
Glossary · Web design

12-column grid

Noun. A responsive web layout system that divides the container into twelve equal vertical tracks separated by consistent gutters. Layouts compose by spanning some number of columns: col-span-12 for full-width, col-span-8 + col-span-4 for main + sidebar, col-span-4 × 3 for a card row.

Origin

The 12-column grid as a web standard begins with Nathan Smith's 960 Grid System (2008): a 960px container, 12 columns × 60px each, 20px gutters. Bootstrap (originally Twitter Blueprint, 2011) made the 12-column responsive grid universal, and dozens of other frameworks (Foundation, Skeleton, Pure) followed. CSS Grid (shipped 2017) implemented the 12-column model natively via grid-template-columns: repeat(12, 1fr).

Why 12

12 is the smallest highly-composite number that divides cleanly into halves, thirds, quarters, sixths, and twelfths. Other counts (8, 16, 24) are used in specific systems but 12 became the web standard precisely because of this divisibility flexibility.

Standard breakpoints

Bootstrap defaults: 1200px (XL), 992px (LG), 768px (MD), 576px (SM). Tailwind: 640, 768, 1024, 1280, 1536. Below SM/640, content typically collapses to single-column.

Common 12-column patterns

The flexibility of 12-column lets designers express a small set of canonical layouts that account for the majority of web work. Full-width hero (span 12), two-column with weighted sides (span 8 + 4 for content + sidebar; span 4 + 8 reversed), even three-column (span 4 + 4 + 4), four-column card row (span 3 × 4), and centred narrow text block (span 8 with 2-column offset on each side). Each of these maps cleanly onto the 12-column structure because 12 divides evenly by 2, 3, 4, and 6.

Gutters and container widths

The standard 12-column setup includes a gutter (the space between adjacent columns) typically set at 16-32 px depending on the design system. Tighter gutters (16 px) feel denser and more editorial; wider gutters (32 px) feel airier and more modern. The container width — the maximum width the 12-column grid fills — is typically 1200 px for content-heavy sites and 1440 px for image-heavy ones. Outside these maximums, the grid stops growing and is centred in the viewport with marginal whitespace on either side.

See also

Definition

12 is a term in the Grid Maker Pro overlay catalogue. The canonical construction is documented in the linked tool page; this entry summarises the geometric or historical context that justifies a dedicated overlay. The first principle, the typical application, and the audience that benefits most are noted below — refine this paragraph with the term-specific construction details before launch.

Etymology and origin

12 has roots in either fine-art tradition, geometric formalism, or design-systems practice — sometimes all three. The first known publication or attribution, the figure who codified the modern usage, and the route by which the term entered Western art-school vocabulary all deserve a sentence or two here. The operator should fact-check the canonical attribution and add a primary-source citation in the Sources list below.

In practice

Practitioners reach for the 12 overlay when an image needs a quick check against a specific compositional principle. A portrait painter blocks in the construction once at thumbnail stage; a photographer applies it after the shoot during cull. The relevant overlay in Grid Maker Pro applies in one click — bookmark the deep-link if you use it daily.

Sources

  • Primary source — fill in citation, e.g. published treatise, peer-reviewed article, or canonical workbook.
  • Secondary source — supporting attribution, e.g. art-history survey or museum catalogue.
  • Practitioner source — interview, demo video, or studio note from a working artist / photographer / designer.
Glossary · See also

Related entries

Rule of FifthsGlossary definition: the Rule of Fifths divides an image into a 5×5 grid (20%, 40%, 60%, 8… Rule of ThirdsGlossary definition: the rule of thirds is a composition guideline that divides an image i… Baseline GridBaseline grid: a typographic ruling of horizontal lines spaced at the body-text line-heigh…
Try the overlay in the tool

Sarah Chen

Founder of Grid Maker Pro. Classical portrait painter (BA Fine Arts). Writes about composition, drawing methods, and the art-history claims that don't survive measurement.

Updated · Methodology