CSS Grid Layout Patterns I Reach For Every Week
After building dozens of production layouts with Grid, certain patterns show up in every project. Here are the ones I reuse constantly. Grid is the layout tool I reach for first on almost every project. Once you internalize a handful of patterns, most page structures collapse into a few lines of CSS. In this article I want to share the patterns I actually use week in and week out, not the toy examples from documentation tutorials. The 12-Column App Shell Most dashboards I build use a twelve-column grid with a fixed sidebar and a fluid main area. The trick is combining a fixed track with a fractional track so the sidebar stays a constant width while the content fills the rest. .app-shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'header header' 'nav main' 'footer footer'; min-height: 100vh; } .header { grid-area: header; } .nav { grid-area: nav; } .main { grid-area: main; } .footer { grid-area: footer; } Using grid-template-areas makes the structure readable at a glance. When a new developer opens the file, they immediately see the page shape without tracing column numbers. I prefer named areas…