CSS 12-Column Grid Layout

Twelve columns divides evenly into halves, thirds, quarters, and sixths -- which is exactly why it became the standard column count long before CSS Grid existed, and CSS Grid makes it trivial to build.

In this page:

Why 12 Columns Specifically
Setting Up the 12 Equal Tracks
Spanning Columns for Component Widths
Building a Multi-Component Row
Gutters Between Columns

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

css

<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.

Example: Setting Up the 12 Equal Tracks

css

<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.

Example: Spanning Columns for Component Widths

css

<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.

Example: Building a Multi-Component Row

css

<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.

Example: Gutters Between Columns

css

<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>

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Item Order Next Lesson → CSS Responsive Design