Grid 12-column Layout

12-column Layout

A 12-column grid is a classic layout system used in many frameworks. CSS Grid makes it simple to build a clean 12-column layout without extra classes.

Create 12 equal columns:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

Now every direct child can span any number of columns.

Column Spans

Use grid-column with span to control how wide an item should be.

Examples:

.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

HTML example:

<div class="grid-12">
  <div class="col-8">Main</div>
  <div class="col-4">Side</div>
</div>

Tip: You can also place items on specific lines:

/* start / end */
.feature {
  grid-column: 3 / 11;
}

Gaps (Gutters)

In grid systems, the spacing between columns is often called a “gutter”. In CSS Grid, gutters are controlled by gap.

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; /* gutter */
}

You can also set row and column gaps separately:

.grid-12 {
  gap: 18px 12px; /* row-gap column-gap */
}

Tip: Prefer gap over margins for grid spacing. It keeps spacing consistent and avoids edge issues.

Responsive 12-col

On small screens, you usually want columns to stack. The simplest approach is: default to full width, then add spans at breakpoints.

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* default: stack */
[class^="col-"] {
  grid-column: span 12;
}

/* tablet */
@media (min-width: 768px) {
  .md-6 { grid-column: span 6; }
  .md-4 { grid-column: span 4; }
  .md-3 { grid-column: span 3; }
}

/* desktop */
@media (min-width: 992px) {
  .lg-8 { grid-column: span 8; }
  .lg-6 { grid-column: span 6; }
  .lg-4 { grid-column: span 4; }
  .lg-3 { grid-column: span 3; }
}

Example HTML:

<div class="grid-12">
  <div class="md-6 lg-8">Main</div>
  <div class="md-6 lg-4">Side</div>
</div>

Summary

• Create a 12-column grid with repeat(12, 1fr).
• Use grid-column: span N to control widths.
• Use gap as gutters between columns/rows.
• Make layouts responsive by stacking by default and adding spans at breakpoints.