The Complete Guide to CSS Grid Layout

CSS Grid is the most powerful layout system in CSS. This guide covers everything you need to know.

Basic Grid Setup

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
}

Grid Lines and Areas

Name your grid areas for semantic layouts:

.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}

Responsive Grids

Use auto-fit and minmax for responsive layouts without media queries:

.container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Common Patterns

Holy Grail Layout

Card Grid

Dashboard Layout

Browser Support

CSS Grid is supported in all modern browsers.