-
- Joined
- Mar 22, 2026
-
- Messages
- 434
-
- Reaction score
- 10
-
- Points
- 0
CSS Grid Layout is a two-dimensional layout system for the web, handling both columns and rows. Unlike Flexbox, which is largely one-dimensional, Grid allows for complex, responsive layouts with minimal markup.
Core Concepts
To use CSS Grid effectively, you need to understand the relationship between the grid container and its items.
Basic Implementation
Setting up a basic grid requires defining the container and specifying the track sizes using
In this example,
Advanced Placement with Grid Areas
For more sophisticated layouts, naming grid areas makes your CSS much more readable and maintainable.
Using
Core Concepts
To use CSS Grid effectively, you need to understand the relationship between the grid container and its items.
- Grid Container: The element on which
display: gridordisplay: inline-gridis applied. This establishes the grid formatting context for all direct children. - Grid Item: The direct children of the grid container.
- Grid Track: The space between two adjacent lines, known as a row or column.
- Grid Cell: The space between four adjacent grid lines—the "unit" of the grid.
Basic Implementation
Setting up a basic grid requires defining the container and specifying the track sizes using
grid-template-columns and grid-template-rows.
CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}In this example,
repeat(3, 1fr) creates three equal-width columns that scale fluidly with the viewport. The grid-gap property (or gap) sets the gutters between the tracks.Advanced Placement with Grid Areas
For more sophisticated layouts, naming grid areas makes your CSS much more readable and maintainable.
CSS:
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 250px 1fr;
height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Using
grid-template-areas allows you to visualize the layout directly in your stylesheet, making responsive modifications via media queries significantly easier to reason about.