Grid Basics
Build two-dimensional layouts with CSS Grid.
Syntax
display: grid; grid-template-columns: 1fr 1fr 1fr;CSS Grid lays out content in rows and columns at the same time. Enable it with display: grid on a container.
Define columns with grid-template-columns and rows with grid-template-rows. Direct children become grid items that fill the cells.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses CSS Grid to build a full-page app layout with a fixed header, sidebar, main content area, and footer in under 15 lines of CSS.
- A designer creates a two-dimensional magazine layout where articles span multiple columns and rows simultaneously.
- A developer replaces a complex Bootstrap 12-column float grid with a native CSS grid, eliminating all wrapper div nesting.
More examples
Simple two-column grid
Creates a two-column grid where the second column is twice as wide as the first using fr units.
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 24px;
}Three-column card grid
Uses repeat(3, 1fr) to create three equal-width columns with consistent gap spacing for a card grid.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 24px;
}Full-page app layout
Defines a three-row, two-column app shell where header and footer span all columns using grid-column: 1 / -1.
.app {
display: grid;
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2; }
.main { grid-row: 2; }
.footer { grid-column: 1 / -1; }
Discussion