12-Column Grid
A Bootstrap-style 12-column track with `repeat(12, minmax(0, 1fr))`. Cells span any number of columns via `grid-column: span N`, giving you the familiar `col-6 / col-3 / col-9` rhythm without a framework.
The code
<div class="gl-12"> <div class="gl-12-c12"><strong>12</strong><em>span 12</em></div> <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div> <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div> <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div> <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div> <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div> <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div> <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div> <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div> <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div> <div class="gl-12-c8"><strong>8</strong><em>span 8</em></div> <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div> </div>
<div class="gl-12">
<div class="gl-12-c12"><strong>12</strong><em>span 12</em></div>
<div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
<div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
<div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
<div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
<div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
<div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
<div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
<div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
<div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
<div class="gl-12-c8"><strong>8</strong><em>span 8</em></div>
<div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
</div>.gl-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 10px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12)),
#1a1206;
font-family: 'Inter', system-ui, sans-serif;
color: #fef3c7;
box-sizing: border-box;
align-content: start;
}
.gl-12 > div {
background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.1));
border: 1px solid rgba(245,158,11,0.32);
border-radius: 10px;
padding: 14px 10px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
min-height: 64px;
}
.gl-12 > div strong {
font-size: 22px; font-weight: 800; color: #fef3c7;
letter-spacing: -0.02em;
}
.gl-12 > div em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: #fbbf24;
letter-spacing: 0.04em;
}
.gl-12-c12 { grid-column: span 12; background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.gl-12-c12 strong { color: #1a1206; }
.gl-12-c12 em { color: #1a1206; opacity: 0.6; }
.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; }
@media (max-width: 720px) {
.gl-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gl-12-c12, .gl-12-c8, .gl-12-c6 { grid-column: span 6; }
.gl-12-c4, .gl-12-c3 { grid-column: span 3; }
} .gl-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 10px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12)),
#1a1206;
font-family: 'Inter', system-ui, sans-serif;
color: #fef3c7;
box-sizing: border-box;
align-content: start;
}
.gl-12 > div {
background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.1));
border: 1px solid rgba(245,158,11,0.32);
border-radius: 10px;
padding: 14px 10px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
min-height: 64px;
}
.gl-12 > div strong {
font-size: 22px; font-weight: 800; color: #fef3c7;
letter-spacing: -0.02em;
}
.gl-12 > div em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: #fbbf24;
letter-spacing: 0.04em;
}
.gl-12-c12 { grid-column: span 12; background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.gl-12-c12 strong { color: #1a1206; }
.gl-12-c12 em { color: #1a1206; opacity: 0.6; }
.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; }
@media (max-width: 720px) {
.gl-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gl-12-c12, .gl-12-c8, .gl-12-c6 { grid-column: span 6; }
.gl-12-c4, .gl-12-c3 { grid-column: span 3; }
}