CSS Grid Level 2: Subgrid & Masonry
Lesson 22 • Advanced Track
What You'll Learn
💡 Think of It Like This
Grid template areas are like drawing a floor plan. You name each room (area) and arrange them visually in your CSS. Subgrid is like a room that inherits the building's structural columns — child elements align to the parent grid's tracks automatically.
| Feature | Browser Support | Use Case |
|---|---|---|
grid-template-areas | ✅ All browsers | Visual page layouts |
subgrid | ✅ Firefox, Chrome 117+, Safari 16+ | Aligned card content |
auto-fill | ✅ All browsers | Fill available space with tracks |
auto-fit | ✅ All browsers | Like auto-fill but collapses empty tracks |
Named Grid Template Areas
Draw your layout visually in CSS using named areas — the most readable way to build complex layouts.
Grid Template Areas Dashboard
A dashboard layout using named grid areas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Areas</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; }
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"nav footer footer";
grid-te
...auto-fill vs auto-fit
Both create responsive grids without media queries, but they handle empty space differently.
auto-fill vs auto-fit
See the difference when there are fewer items than columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>auto-fill vs auto-fit</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 25px; }
h3 { margin: 25px 0 10px; }
.auto-fill {
display: grid;
grid-template-columns: repeat
...Masonry-Style Layout
Create a Pinterest-style masonry layout where items of different heights pack tightly together.
CSS Masonry Layout
Items of varying height pack together beautifully
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Layout</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 20px; }
/* CSS Columns approach (widely supported) */
.masonry {
columns: 3;
column-gap: 15px;
}
...⚠️ Common Mistakes
- Confusing auto-fill and auto-fit — auto-fill creates empty tracks; auto-fit collapses them. When you have few items, auto-fit makes them stretch to fill the row.
- Expecting subgrid to work everywhere — Check browser support. Subgrid is well-supported now but not in older browsers.
- Using area names with spaces/special chars — Grid area names must be valid CSS identifiers (no spaces, hyphens are okay).
- Forgetting break-inside: avoid for masonry — Without it, items can be split across columns.
🎉 Lesson Complete
You've mastered CSS Grid Level 2 features:
- ✅ Named template areas for visual, readable layouts
- ✅ auto-fill vs auto-fit for responsive grids without media queries
- ✅ Masonry layouts using CSS columns with break-inside: avoid
- ✅ Subgrid for aligned child elements within nested grids
Sign up for free to track which lessons you've completed and get learning reminders.