CSS Grid Container
CSS Grid is a powerful two-dimensional layout system that lets you control rows and columns simultaneously.
Grid Container Properties
Quick Reference
| Property | Values | Purpose |
|---|---|---|
display: grid |
— | Creates grid container |
grid-template-columns |
100px 1fr 2fr, repeat(3, 1fr) |
Column definitions |
grid-template-rows |
100px auto, repeat(3, 100px) |
Row definitions |
gap |
10px, 10px 20px |
Gap between items |
grid-template-areas |
"header header" "main aside" |
Named grid areas |
fr Unit
The fr unit distributes remaining space proportionally:
Example
HTML
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 ratio */
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #3498db;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">1fr</div>
<div class="item">2fr (twice as wide)</div>
<div class="item">1fr</div>
</div>
repeat()
The repeat() function reduces repetition:
Example
HTML
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Same as: 1fr 1fr 1fr */
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #e74c3c;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
<div class="item">Column 3</div>
</div>
minmax() + auto-fill/auto-fit
Creates responsive grids that automatically adjust column count:
Example
HTML
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
background: #f5f5f5;
padding: 15px;
}
.item {
background: #2ecc71;
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
}
</style>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
auto-fill vs auto-fit:
auto-fill: Creates as many columns as fit, even if emptyauto-fit: Same as auto-fill, but collapses empty columns
grid-template-areas
Define layout with named areas:
Example
HTML
<style>
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 40px;
gap: 10px;
min-height: 100vh;
}
.header { grid-area: header; background: #2c3e50; color: white; }
.sidebar { grid-area: sidebar; background: #34495e; color: white; }
.main { grid-area: main; background: #ecf0f1; }
.aside { grid-area: aside; background: #34495e; color: white; }
.footer { grid-area: footer; background: #2c3e50; color: white; }
.layout > * { padding: 20px; display: flex; align-items: center; justify-content: center; }
</style>
<div class="layout">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main">Main Content</main>
<aside class="aside">Aside</aside>
<footer class="footer">Footer</footer>
</div>
❓ FAQ
Q How to choose between Grid and Flexbox?
A One-dimensional (single row or column) uses Flexbox, two-dimensional (simultaneous row and column control) uses Grid. Most pages use both: Grid for overall page skeleton, Flexbox for local arrangements. Using both on one page is completely normal.
Q What's the difference between fr units and percentages?
A `fr` distributes remaining space, percentages distribute total width. With gap, `fr` automatically deducts gap before calculating proportions, percentages don't. `1fr 1fr 1fr` with gap is still perfect thirds, while `33.33% 33.33% 33.33%` overflows.
Q How to use grid-template-areas?
A Define layout with named areas: `grid-template-areas: "header header" "sidebar main" "footer footer";` then assign children with `grid-area: header`. To change layout, just adjust the string template — no need to reposition children.
📖 Summary
- Grid is a powerful two-dimensional layout system
- Define grid structure with
grid-template-columnsandgrid-template-rows - Use
frunit for proportional space distribution - Create flexible grids with
repeat(),minmax() gapsets spacing;auto-fill/auto-fitwithminmaxcreates truly responsive grids
📝 Exercises
Basic
- Create a 3×3 grid container, each cell 100px×100px, 10px gap.
- Use
1frunit for a "two-column" layout (left 1fr, right 3fr).
Intermediate
- Create an auto-adapting card grid with
repeat(auto-fill, minmax(150px, 1fr))— resize browser to see columns change. - Create a "classic three-row two-column" layout: header (spanning two columns), left menu, right content, footer (spanning two columns).
Challenge
- Create a responsive image gallery: desktop 4 columns, tablet 2 columns, mobile 1 column, using
auto-fill+minmax. - Use
grid-template-areasfor a complete blog layout (header, navigation, main content, sidebar, footer).