{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Magazine Editorial
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-mag { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 6px; width: 340px; font-family: Georgia, serif; color: #f0eeff; } .gl-mag > * { background: #18181f; border: 1px solid rgba(124,108,255,0.22); border-radius: 6px; } .gl-mag-lead { grid-row: span 2; background: linear-gradient(135deg, rgba(124,108,255,0.4), rgba(167,139,250,0.18)); padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; } .gl-mag-tag { font-family: monospace; font-size: 9px; color: #cbb8ff; letter-spacing: 0.12em; } .gl-mag-lead h3 { margin: 0; font-size: 15px; } .gl-mag-lead p { margin: 0; font-size: 10.5px; color: #cbd5e1; line-height: 1.4; } .gl-mag-s { display: flex; align-items: center; justify-content: center; font-family: system-ui, sans-serif; font-size: 11.5px; font-weight: 600; color: #a78bfa; }
<div class="gl-mag"> <article class="gl-mag-lead"> <span class="gl-mag-tag">FEATURE</span> <h3>Lead Story</h3> <p>The biggest piece anchors the layout</p> </article> <article class="gl-mag-s">News</article> <article class="gl-mag-s">Op-ed</article> <article class="gl-mag-s">Review</article> <article class="gl-mag-s">Brief</article> </div>
Live preview
Ready