30 CSS Grid Layouts08 / 30

Pure CSSMIT licensed

12-Column Grid

A framework-free 12-column system in eight lines of CSS — with the column overlay every design tool shows, rendered live behind real content so students can SEE spans land on tracks. Utility classes .col-1 through .col-12, a gap variable, and none of Bootstrap's 12,000 lines.

Published Updated

Live Demo
Try it

The code

<section class="cgl-08" aria-label="12-column grid system demo">
  <div class="cgl-08__frame">
    <div class="cgl-08__grid">
      <div class="cgl-08__block cgl-08-col-12"><code>span 12</code> — hero, nav, footer</div>
      <div class="cgl-08__block cgl-08-col-8"><code>span 8</code> — article</div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code> — sidebar</div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code></div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code></div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code></div>
      <div class="cgl-08__block cgl-08-col-6"><code>span 6</code></div>
      <div class="cgl-08__block cgl-08-col-3"><code>span 3</code></div>
      <div class="cgl-08__block cgl-08-col-3"><code>span 3</code></div>
    </div>
  </div>
</section>
.cgl-08,
.cgl-08 *,
.cgl-08 *::before,
.cgl-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-08 {
  width: 100%;
  min-height: 100vh;
  --gap: 12px;
  --indigo: oklch(0.5 0.19 280);
  --paper: oklch(0.97 0.008 280);
  --overlay: oklch(0.65 0.24 350/.14);
  font-family: ui-monospace,'Cascadia Code',Menlo,monospace;
  background: var(--paper);
  padding: 1.4rem;
}

.cgl-08 .cgl-08__frame {
  position: relative;
  border: 1px solid oklch(0.88 0.02 280);
  border-radius: 12px;
  padding: var(--gap);
  background: repeating-linear-gradient(90deg,var(--overlay) 0 calc((100% + var(--gap))/12 - var(--gap)),transparent calc((100% + var(--gap))/12 - var(--gap)) calc((100% + var(--gap))/12));
  background-origin: content-box;
  background-clip: content-box;
}

.cgl-08 .cgl-08__grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: var(--gap);
}

.cgl-08 .cgl-08-col-3 {
  grid-column: span 3;
}

.cgl-08 .cgl-08-col-4 {
  grid-column: span 4;
}

.cgl-08 .cgl-08-col-6 {
  grid-column: span 6;
}

.cgl-08 .cgl-08-col-8 {
  grid-column: span 8;
}

.cgl-08 .cgl-08-col-12 {
  grid-column: span 12;
}

.cgl-08 .cgl-08__block {
  background: color-mix(in oklab,var(--indigo) 8%,white);
  border: 1px solid color-mix(in oklab,var(--indigo) 35%,white);
  border-radius: 8px;
  padding: .8rem;
  min-block-size: 56px;
  display: grid;
  align-content: center;
  font-size: .72rem;
  color: oklch(0.35 0.1 280);
}

.cgl-08 .cgl-08__block code {
  font-weight: 700;
  color: var(--indigo);
}

@media (max-width: 560px) {
  .cgl-08 .cgl-08-col-3,
    .cgl-08 .cgl-08-col-4 {
    grid-column: span 6;
  }

  .cgl-08 .cgl-08-col-6,
    .cgl-08 .cgl-08-col-8 {
    grid-column: span 12;
  }
}
/* No JavaScript — repeat(12, minmax(0,1fr)) + span utilities; a calc()-based gradient renders the design-tool column overlay. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Grid Layout from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: 12-Column Grid
Source: https://codefronts.com/layouts/css-grid-layouts/12-column-grid/

A framework-free 12-column system in eight lines of CSS — with the column overlay every design tool shows, rendered live behind real content so students can SEE spans land on tracks. Utility classes .col-1 through .col-12, a gap variable, and none of Bootstrap's 12,000 lines.
## HTML
```html
<section class="cgl-08" aria-label="12-column grid system demo">
  <div class="cgl-08__frame">
    <div class="cgl-08__grid">
      <div class="cgl-08__block cgl-08-col-12"><code>span 12</code> — hero, nav, footer</div>
      <div class="cgl-08__block cgl-08-col-8"><code>span 8</code> — article</div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code> — sidebar</div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code></div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code></div>
      <div class="cgl-08__block cgl-08-col-4"><code>span 4</code></div>
      <div class="cgl-08__block cgl-08-col-6"><code>span 6</code></div>
      <div class="cgl-08__block cgl-08-col-3"><code>span 3</code></div>
      <div class="cgl-08__block cgl-08-col-3"><code>span 3</code></div>
    </div>
  </div>
</section>
```
## CSS
```css
.cgl-08,
.cgl-08 *,
.cgl-08 *::before,
.cgl-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-08 {
  width: 100%;
  min-height: 100vh;
  --gap: 12px;
  --indigo: oklch(0.5 0.19 280);
  --paper: oklch(0.97 0.008 280);
  --overlay: oklch(0.65 0.24 350/.14);
  font-family: ui-monospace,'Cascadia Code',Menlo,monospace;
  background: var(--paper);
  padding: 1.4rem;
}

.cgl-08 .cgl-08__frame {
  position: relative;
  border: 1px solid oklch(0.88 0.02 280);
  border-radius: 12px;
  padding: var(--gap);
  background: repeating-linear-gradient(90deg,var(--overlay) 0 calc((100% + var(--gap))/12 - var(--gap)),transparent calc((100% + var(--gap))/12 - var(--gap)) calc((100% + var(--gap))/12));
  background-origin: content-box;
  background-clip: content-box;
}

.cgl-08 .cgl-08__grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: var(--gap);
}

.cgl-08 .cgl-08-col-3 {
  grid-column: span 3;
}

.cgl-08 .cgl-08-col-4 {
  grid-column: span 4;
}

.cgl-08 .cgl-08-col-6 {
  grid-column: span 6;
}

.cgl-08 .cgl-08-col-8 {
  grid-column: span 8;
}

.cgl-08 .cgl-08-col-12 {
  grid-column: span 12;
}

.cgl-08 .cgl-08__block {
  background: color-mix(in oklab,var(--indigo) 8%,white);
  border: 1px solid color-mix(in oklab,var(--indigo) 35%,white);
  border-radius: 8px;
  padding: .8rem;
  min-block-size: 56px;
  display: grid;
  align-content: center;
  font-size: .72rem;
  color: oklch(0.35 0.1 280);
}

.cgl-08 .cgl-08__block code {
  font-weight: 700;
  color: var(--indigo);
}

@media (max-width: 560px) {
  .cgl-08 .cgl-08-col-3,
    .cgl-08 .cgl-08-col-4 {
    grid-column: span 6;
  }

  .cgl-08 .cgl-08-col-6,
    .cgl-08 .cgl-08-col-8 {
    grid-column: span 12;
  }
}
```

## JavaScript
```js
/* No JavaScript — repeat(12, minmax(0,1fr)) + span utilities; a calc()-based gradient renders the design-tool column overlay. */
```

How this works

The system is grid-template-columns: repeat(12, minmax(0, 1fr)) plus one custom-property-driven utility: [class*="cgl-08-col"] { grid-column: span min(var(--span, 12), 12) } — wait, simpler in practice: each .cgl-08-col-N sets grid-column: span N. Twelve utilities, generated in twelve lines. The minmax(0,1fr) tracks are equal AND shrinkable, so long words can't distort the rhythm.

The pink column overlay is a translucent repeating-linear-gradient sized with calc((100% + var(--gap)) / 12) so its stripes align exactly with tracks-plus-gaps — the same math design tools use. Toggle it off by deleting one background line. Rows wrap automatically: spans that exceed the remaining columns flow to the next row, which is the whole layout algebra of every marketing page ever built.

Make it yours

  • Change --gap once — tracks, overlay and rhythm all follow.
  • Go 16-column for dense dashboards by changing two numbers (repeat count + overlay divisor).
  • Add responsive span utilities (.md-col-6) inside media queries exactly like the base set.
  • Delete the overlay background line in production — it's a learning aid, not chrome.

Gotchas — read before shipping

  • Always minmax(0,1fr), never bare 1fr — twelve auto-min tracks make overflow debugging a nightmare.
  • Spans don't force new rows; a span-8 after a span-6 wraps and leaves a 6-track hole. Use grid-column: 1 / span N when a block must start a row.
  • The overlay's calc assumes uniform gaps — if you set row-gap differently, derive the stripe width from column-gap only.

Browser support

ChromeSafariFirefoxEdge
111+16.2+113+111+

Floor set by oklch(), color-mix() as this demo is written. The core technique itself goes back further — Chrome 57+.

Core pattern is original grid. calc() with custom properties in gradients needs 2019+; the overlay is optional garnish.

Techniques used in this demo

color-mix()MDN ↗grid-templateMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →