CSS Grid
Grid 12-column Layout
The 12-column grid is the backbone of countless design systems, from Bootstrap to bespoke frameworks. Twelve divides evenly into halves, thirds, quarters and sixths, giving flexible proportions. With CSS Grid you can build one in a few lines, no framework required.
Why Twelve Columns?
Twelve is a highly divisible number: it splits cleanly into 2, 3, 4 and 6 equal parts. That means a 12-column grid can express a half (6 columns), a third (4 columns), a quarter (3 columns) and many other proportions without awkward fractions. This flexibility is why it became the industry standard.
The Foundation
The entire system rests on one declaration: grid-template-columns: repeat(12, 1fr). This creates twelve equal columns. Items then claim a number of columns with grid-column: span N.
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.col-6 { grid-column: span 6; } /* half width */
.col-4 { grid-column: span 4; } /* one third */
.col-3 { grid-column: span 3; } /* one quarter */Seeing the 12 Columns
This first example shows all twelve base columns as thin coloured strips so the underlying grid is visible. Every wider block you build is just a span across some of these.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 6px;
padding: 10px;
background: #f1f5f9;
font-family: sans-serif;
}
.u {
background: #6366f1; color: #fff; padding: 18px 0;
text-align: center; border-radius: 4px; font-size: 12px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="grid-12">
<div class="u">1</div><div class="u">2</div><div class="u">3</div>
<div class="u">4</div><div class="u">5</div><div class="u">6</div>
<div class="u">7</div><div class="u">8</div><div class="u">9</div>
<div class="u">10</div><div class="u">11</div><div class="u">12</div>
</div>
</body>
</html>Building Rows with Spans
Now combine spans to build real content rows. Notice how the spans in each row add up to twelve: 6+6, 4+4+4, and 8+4. That is the whole trick.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
padding: 12px;
background: #f1f5f9;
font-family: sans-serif;
}
.block {
color: #fff; padding: 22px; border-radius: 6px;
text-align: center; font-weight: 700;
}
.span6 { grid-column: span 6; background: #6366f1; }
.span4 { grid-column: span 4; background: #14b8a6; }
.span8 { grid-column: span 8; background: #f59e0b; }
.span4b { grid-column: span 4; background: #ec4899; }
</style>
</head>
<body>
<div class="grid-12">
<div class="block span6">span 6</div>
<div class="block span6">span 6</div>
<div class="block span4">span 4</div>
<div class="block span4">span 4</div>
<div class="block span4">span 4</div>
<div class="block span8">span 8 (main)</div>
<div class="block span4b">span 4 (aside)</div>
</div>
</body>
</html>In every row the spans should add up to 12. If they total more than 12, the extra items wrap to the next row automatically.
Making It Responsive
On small screens, cramming twelve columns of content is unreadable. The standard approach is a media query that collapses everything to a single full-width column below a breakpoint. Resize the result pane to see it switch.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
padding: 12px;
background: #f1f5f9;
font-family: sans-serif;
}
.block {
color: #fff; padding: 22px; border-radius: 6px;
text-align: center; font-weight: 700;
}
.a { grid-column: span 8; background: #6366f1; }
.b { grid-column: span 4; background: #ec4899; }
.c { grid-column: span 4; background: #14b8a6; }
.d { grid-column: span 4; background: #f59e0b; }
.e { grid-column: span 4; background: #0891b2; }
/* Below 640px, every block becomes full width */
@media (max-width: 640px) {
.block { grid-column: 1 / -1; }
}
</style>
</head>
<body>
<div class="grid-12">
<div class="block a">Main (8)</div>
<div class="block b">Aside (4)</div>
<div class="block c">Card (4)</div>
<div class="block d">Card (4)</div>
<div class="block e">Card (4)</div>
</div>
</body>
</html>grid-column: 1 / -1 is a handy shorthand: line -1 is the very last grid line, so this always spans the full width regardless of column count.
Common Span Combinations
| Layout | Spans (total 12) |
|---|---|
| Two equal halves | 6 + 6 |
| Three equal thirds | 4 + 4 + 4 |
| Four equal quarters | 3 + 3 + 3 + 3 |
| Main + sidebar | 8 + 4 (or 9 + 3) |
| Sidebar + main + sidebar | 3 + 6 + 3 |
Key Points
- grid-template-columns: repeat(12, 1fr) is the whole foundation.
- Items claim width with grid-column: span N; spans in a row should total 12.
- Twelve divides evenly into 2, 3, 4 and 6 for flexible proportions.
- Collapse to grid-column: 1 / -1 on mobile for a single-column stack.
- Line -1 always refers to the last grid line, spanning full width.