Introduction
CSS Grid Layout is a two-dimensional system that lets you control both rows and columns simultaneously, unlike flexbox's single-axis model. Setting display: grid on a container turns it into a grid, and you define its structure with grid-template-columns and grid-template-rows, then place children into cells — either automatically or explicitly via named grid areas or line numbers.
Cricket analogy: CSS Grid is like planning a stadium's full seating chart in both rows and columns at once, unlike flexbox which is like arranging just one row of players in the outfield; setting display: grid is like laying out the stadium blueprint, then grid-template-columns/rows define each seating block.
Syntax
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px; /* row-gap and column-gap shorthand */
grid-template-areas:
"sidebar header header"
"sidebar main main"
"sidebar footer footer";
}
.item {
grid-column: 1 / 3; /* start line / end line */
grid-row: 2 / span 2;
grid-area: main; /* references a named area */
}Explanation
grid-template-columns/grid-template-rows define track sizes; the fr unit represents a fraction of remaining free space, so 1fr 1fr splits leftover space evenly while 200px 1fr gives a fixed sidebar and a flexible remainder. gap (formerly grid-gap) sets spacing between tracks without adding space at the container edges, unlike margins. grid-template-areas lets you name regions of the grid as an ASCII-art-like map, and items are placed into those regions with grid-area. Alternatively, grid-column/grid-row place items using grid line numbers (1-indexed) and support span to cover multiple tracks. repeat() and minmax() are commonly combined, e.g. repeat(auto-fill, minmax(200px, 1fr)), to build responsive grids without media queries.
Cricket analogy: The fr unit is like splitting a prize purse proportionally among the top scorers rather than fixed amounts; gap is the buffer zone between fielding positions with no space added at the boundary; grid-template-areas names zones like 'slips' and 'covers' on a fielding chart, and repeat(auto-fill, minmax(200px,1fr)) is like fitting as many fielders as the ground allows without pre-planning exact positions.
Example
.page {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"sidebar header"
"sidebar content";
min-height: 100vh;
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.content { grid-area: content; }
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}Output
The .page layout produces a fixed 220px sidebar spanning both rows, with a header and content area filling the remaining column. The .gallery automatically fits as many 180px-minimum columns as the container width allows, growing each column to fill leftover space — reflowing responsively without any media queries.
Cricket analogy: The .page layout is like a fixed 220-run target set for the sidebar that spans both innings, with the header and commentary filling the remaining space, while the .gallery is like a ground automatically fitting as many 180-seat stands as space allows, growing each stand to fill leftover room without pre-planning exact seating.
Use Grid for two-dimensional page/component layout (rows AND columns together) and Flexbox for one-dimensional alignment within a row or column — they are complementary, not competing.
Key Takeaways
- display: grid enables two-dimensional layout control over rows and columns simultaneously.
- The fr unit distributes remaining free space proportionally among tracks.
- grid-template-areas + grid-area provide a readable way to name and place layout regions.
- grid-column/grid-row use 1-indexed line numbers and support the span keyword.
- repeat(auto-fill, minmax(...)) builds responsive grids without writing media queries.
Practice what you learned
1. What is the key structural difference between CSS Grid and Flexbox?
2. What does the fr unit represent in grid-template-columns?
3. Which property assigns a grid item to a named region defined in grid-template-areas?
4. What does grid-column: 1 / 3 mean?
5. What does repeat(auto-fill, minmax(200px, 1fr)) achieve?
Was this page helpful?
You May Also Like
Flexbox in CSS
A one-dimensional layout model for distributing space and aligning items along a row or column using the flex container/item model.
Responsive Design and Media Queries
Techniques and CSS media queries used to adapt layouts across different screen sizes and devices.
CSS Units for Layout (px, %, rem, em, vh/vw)
How absolute and relative CSS length units differ and when to use px, %, rem, em, and viewport units in layouts.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics