This guide covers every part of CSS Grid layout with visual examples. Includes responsive patterns, 4-language code and a free interactive generator.
CSS Grid is a two-dimensional layout system built into CSS. It lets you define rows, columns and gaps, then place items anywhere within that structure.
Grid handles two dimensions at once: rows and columns. Flexbox handles one dimension at a time. They work well together, so you can use both.
CSS Grid is supported in all modern browsers. No polyfills needed.
Apply display: grid to any element. All direct children become grid items automatically.
.container {
display: grid;
}
One line to activate the grid.
→ grid-template-columns defines how many columns your grid has and how wide each one is. Use fixed widths, fr units for flexible space, or repeat() to avoid writing the same value many times.
→ grid-template-rows defines row heights the same way. Without it, rows size automatically to fit their content.
→ gap sets the spacing between rows and columns in one property.
By default, CSS Grid places items in sequence from left to right, row by row.
You can place any item precisely using grid-column and grid-row with line numbers or span.
→ grid-template-areas lets you name regions and assign items to them - the most visual way to define a layout.
.grid {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-areas:
'header header header'
'left main right'
'footer footer footer';
}
.left { grid-area: left; }
.main { grid-area: main; }
.right { grid-area: right; }
New to CSS Grid? Don’t worry if this looks technical. Start with the basics above or head to our free step by step learning centre and come back to this section later.
→ repeat(auto-fill, minmax(min, max)) creates responsive card grids without media queries. The browser fits as many columns as will comfortably hold the minimum width, then stretches them to fill the row.
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
The responsive card grid pattern.
→ auto-fit collapses empty tracks, while auto-fill preserves them. In most layouts, auto-fill is the safer default.
For more complex breakpoint control, redefine grid-template-columns at each breakpoint.
Asymmetric multi-column editorial layout. Mix of wide and narrow areas.
Open in generator →The same two-column, two-row layout in CSS, Tailwind, JavaScript and SCSS.
.grid {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr;
gap: 1rem;
}
<div class="grid grid-cols-[200px_1fr] grid-rows-[auto_1fr] gap-4">
const g = document.querySelector('.grid');
g.style.display = 'grid';
g.style.gridTemplateColumns = '200px 1fr';
g.style.gap = '1rem';
$sidebar: 200px;
.grid {
display: grid;
grid-template-columns: $sidebar 1fr;
gap: 1rem;
}
Visual generator. Free, no signup. CSS, Tailwind, JS and SCSS.