CSS Grid layout cheat sheet

CSS Grid has many properties and it's hard to remember the right syntax for common layouts.

Common CSS Grid patterns:

/ Basic grid /
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); / 3 equal columns /
gap: 1rem;
}

/ Responsive auto-fill /
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}

/ Holy grail layout /
.page {
display: grid;
grid-template:
"header header header" auto
"nav main aside" 1fr
"footer footer footer" auto
/ 200px 1fr 200px;
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/ Center anything /
.center {
display: grid;
place-items: center;
}

/ Span columns/rows /
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.full { grid-column: 1 / -1; } / Full width /

/ Masonry-like with auto-flow dense /
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}

Grid is the most powerful CSS layout tool. These patterns cover 90% of layout needs without frameworks.