CSS 12-Column Grid Layout
In this page:
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.col {
grid-column: span number;
}Why 12 Columns Specifically
12 is divisible by 2, 3, 4, and 6, so a 12-column grid can express a half-width, third-width, quarter-width, or sixth-width component just by spanning the right number of columns -- this flexibility is why frameworks like Bootstrap standardized on it.
Example: Why 12 Columns Specifically
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.half { grid-column: span 6; background: lightblue; padding: 8px; }
.third { grid-column: span 4; background: lightgreen; padding: 8px; }
</style>
<div class="grid">
<div class="half">Half</div>
<div class="third">Third</div>
</div>Setting Up the 12 Equal Tracks
grid-template-columns: repeat(12, 1fr) creates twelve equal-width flexible columns in one line, forming the base grid every component will span across.
- Accepted values:
- grid-template-columns: repeat(12, 1fr) — twelve equal columns
- grid-column: span <n> — spans n columns
- gap: <length> — gutters
- minmax(0, 1fr) — prevents overflow
Example: Setting Up the 12 Equal Tracks
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
}
.grid div {
background: lightblue;
padding: 8px;
}
</style>
<div class="grid">
<div>Twelve equal columns as the base</div>
</div>Spanning Columns for Component Widths
An item using grid-column: span 6 takes up exactly half the row (6 of 12 columns); span 4 gives a third-width component, and span 3 gives a quarter-width one.
- Accepted values:
- grid-column: span 3 — quarter width
- grid-column: span 4 — third width
- grid-column: span 6 — half width
- grid-column: span 12 — full width
Example: Spanning Columns for Component Widths
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.quarter { grid-column: span 3; background: lightblue; padding: 8px; }
</style>
<div class="grid">
<div class="quarter">3 of 12 = quarter width</div>
</div>Building a Multi-Component Row
Multiple items with spans that add up to 12 (like span 8 + span 4, or three span 4 items) sit side by side automatically in the same row, since CSS Grid auto-placement fills each row before wrapping to the next.
- Accepted values:
- grid-column: span 4 — third of the row
- grid-column: span 8 — two thirds of the row
- grid-column: span 6 — half a row
- note: spans must add up to 12 to fill a row
Example: Building a Multi-Component Row
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.main { grid-column: span 8; background: lightblue; padding: 8px; }
.sidebar { grid-column: span 4; background: lightgreen; padding: 8px; }
</style>
<div class="grid">
<div class="main">span 8</div>
<div class="sidebar">span 4 — same row, adds up to 12</div>
</div>Gutters Between Columns
Adding a gap value (commonly 16-24px) creates consistent gutters between the 12 columns, matching the visual spacing convention from traditional 12-column frameworks without needing extra margin hacks.
- Accepted values:
- gap: <length> — gutters
- column-gap: <length> — horizontal gutters
- row-gap: <length> — vertical gutters
- calc() — sizes that account for gutters
Example: Gutters Between Columns
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.col { grid-column: span 4; background: lightblue; padding: 8px; }
</style>
<div class="grid">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>- Adding column gaps with
marginand making the row wider than 100%. - Making the spans add up to more than 12 in a row, which wraps to a new row.
- Not adding a responsive rule, so 12 columns stay narrow on phones.
- CSS Grid places items in rows and columns inside a grid container.
- Tracks, gaps, alignment, and named areas define the layout.
- Grid item placement, alignment, and order control positions, and a 12-column layout is a common pattern.
CSS Grid is supported in Chrome 57+, Firefox 52+, Safari 10.1+ and Edge 16+.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: