Grid Level2
Subgrid lets a nested grid borrow its parent's row and column tracks with grid-template-columns: subgrid so child items align to the outer grid, while masonry packs items into the shortest available column like a Pinterest board.
Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
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
Fill available space with tracks
auto-fit
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.
auto-fill vs auto-fit
Both create responsive grids without media queries, but they handle empty space differently.
Masonry-Style Layout
Create a Pinterest-style masonry layout where items of different heights pack tightly together.
⚠️ 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
- ✅ 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
Practice quiz
What is the key difference between auto-fill and auto-fit in repeat()?
- auto-fill collapses empty tracks; auto-fit keeps them
- They are identical in every situation
- auto-fill keeps empty tracks reserved; auto-fit collapses empty tracks so items stretch to fill the row
- auto-fit only works in Flexbox
Answer: auto-fill keeps empty tracks reserved; auto-fit collapses empty tracks so items stretch to fill the row. auto-fill leaves empty tracks in place, while auto-fit collapses empty tracks so existing items stretch.
What does subgrid allow a nested grid to do?
- Inherit the parent grid's row and column tracks so children align to the outer grid
- Create an infinite number of new tracks automatically
- Disable the parent grid entirely
- Convert a grid into a flex container
Answer: Inherit the parent grid's row and column tracks so children align to the outer grid. subgrid lets a nested grid borrow the parent's tracks so child items align to the outer grid lines.
Which value enables subgrid on a nested grid's columns?
- grid-template-columns: inherit;
- grid-columns: parent;
- subgrid: columns;
- grid-template-columns: subgrid;
Answer: grid-template-columns: subgrid;. You write grid-template-columns: subgrid (or for rows) to adopt the parent's tracks.
Which CSS approach is commonly used to build a Pinterest-style masonry layout that is widely supported?
- display: table-cell
- CSS columns with break-inside: avoid on items
- position: absolute on every item
- float: left only
Answer: CSS columns with break-inside: avoid on items. The widely-supported masonry approach uses CSS multi-column layout with break-inside: avoid.
Why is break-inside: avoid important for a CSS-columns masonry layout?
- It stops an item from being split across two columns
- It centers each item
- It removes the gap between columns
- It forces all items to the same height
Answer: It stops an item from being split across two columns. Without break-inside: avoid, an item can be broken across column boundaries.
What must a grid area name be in grid-template-areas?
- Always wrapped in quotes individually
- A number only
- A valid CSS identifier with no spaces (hyphens are allowed)
- A full URL
Answer: A valid CSS identifier with no spaces (hyphens are allowed). Grid area names must be valid CSS identifiers; spaces are not allowed, though hyphens are fine.
In grid-template-areas, what does repeating the same name across cells do?
- It creates an error
- It makes that named area span those adjacent cells
- It deletes the duplicate cells
- It reorders the rows alphabetically
Answer: It makes that named area span those adjacent cells. Repeating a name across adjacent cells makes the area span those rows/columns.
Both auto-fill and auto-fit are typically paired with which function?
- calc()
- translate()
- var()
- minmax()
Answer: minmax(). minmax(min, max) sets a track's flexible size range, e.g. minmax(150px, 1fr).
If a grid has fewer items than columns, which keyword makes the existing items stretch to fill the whole row?
- auto-fill
- auto-fit
- span
- dense
Answer: auto-fit. auto-fit collapses empty tracks, so the present items expand to fill the available width.
Which is the most readable way to build a complex named page layout in Grid?
- Many nested floats
- Absolute positioning of every section
- grid-template-areas with named regions
- A single flex row
Answer: grid-template-areas with named regions. grid-template-areas draws the layout visually in CSS, making complex layouts readable.
Continue this course
- Previous: Flexbox Advanced
- Next: Container Queries