Real-World Layouts
CSS Grid applied to the most common real-world UI patterns. Each layout has its own dedicated page with a full-scale demo, complete code, responsive variants, and step-by-step explanation.
grid-template-areasrepeat(auto-fill, minmax())grid-auto-flow: densesubgrid
🏛️#01
Holy Grail Layout
Header, 3-column body (nav + main + aside), and footer. The classic page layout.
grid-template-areasgrid-templatemin-height: 100vh
🃏#02
Responsive Card Grid
Auto-responsive card grid — no media queries. Cards wrap automatically.
repeat(auto-fill, minmax())auto-fillsubgrid
📊#03
Admin Dashboard
KPI stats, charts, widgets, and data tables in a flexible grid layout.
grid-template-columnsspangrid-auto-rows
📰#04
Magazine / Editorial
Feature hero + secondary stories in an editorial grid layout.
grid-columngrid-rowspannamed areas
🖼️#05
Photo Gallery
Dense-packed gallery with images of varying sizes. No holes.
grid-auto-flow: densespangrid-auto-rows
📱#06
App Sidebar Layout
Fixed sidebar + fluid content — the foundation of every SaaS app.
grid-template-columns: 260px 1frposition: stickynested grids
🔲#07
Asymmetric Mosaic
One large feature item paired with smaller items in a mosaic pattern.
grid-template-columns: 2fr 1fr 1frgrid-row: span N
📄#08
Full-Bleed Article
Blog layout where images break out of the text column to span wider zones.
named grid lines[full-start][content-start]grid-column