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.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

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.

Draw your layout visually in CSS using named areas — the most readable way to build complex layouts.

Both create responsive grids without media queries, but they handle empty space differently.

Create a Pinterest-style masonry layout where items of different heights pack tightly together.

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.