{
CF
}
Code
Fronts
Back to CSS Grid Layouts
12-Column Grid
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; width: 340px; font-family: monospace; font-size: 10px; color: #a78bfa; } .gl-12 > * { background: rgba(124,108,255,0.14); border: 1px solid rgba(124,108,255,0.3); border-radius: 4px; padding: 6px 0; text-align: center; } .gl-12-c12 { grid-column: span 12; } .gl-12-c8 { grid-column: span 8; } .gl-12-c6 { grid-column: span 6; } .gl-12-c4 { grid-column: span 4; } .gl-12-c3 { grid-column: span 3; }
<div class="gl-12"> <div class="gl-12-c12">12</div> <div class="gl-12-c6">6</div><div class="gl-12-c6">6</div> <div class="gl-12-c4">4</div><div class="gl-12-c4">4</div><div class="gl-12-c4">4</div> <div class="gl-12-c3">3</div><div class="gl-12-c3">3</div><div class="gl-12-c3">3</div><div class="gl-12-c3">3</div> <div class="gl-12-c8">8</div><div class="gl-12-c4">4</div> </div>
Live preview
Ready