CSS Grid Level 2 (Subgrid)

Q: Which value do you use for 'grid-template-rows' to enable subgrid behavior?

Answer: subgrid. The 'subgrid' keyword tells the element to use the grid lines of its parent instead of defining its own track sizes.

Q: To use subgrid, an element must span across tracks in its parent. True or False?

Answer: True. A subgrid needs to occupy specific tracks in the parent grid to know which coordinates and sizes to inherit.

Master the art of perfectly aligned nested layouts. Learn how to let child elements borrow the grid lines of their parents to solve complex alignment challenges.

Expert Answer & Key Takeaways

Master the art of perfectly aligned nested layouts. Learn how to let child elements borrow the grid lines of their parents to solve complex alignment challenges.

1. The 'Wobbly Header' Problem

In a standard grid, child elements are independent. If you have a row of cards, their headers might have different heights, making them look unaligned across the row.

The Example: The Subgrid Solution

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Row 1: Header, Row 2: Body, Row 3: Footer */
  grid-template-rows: auto 1fr auto;
}

.card {
  /* This card spans all three rows of the parent */
  grid-row: span 3;
  display: grid;
  /* BORROW the rows from the parent! */
  grid-template-rows: subgrid;
}

Feature	Standard Nested Grid	CSS Subgrid
Track Calculation	Independent of parent.	Inherited from parent.
Alignment	Items only align within their card.	Items align across all brothers in the same row.
Gaps	Must be redefined on child.	Automatically inherits parent's `gap`.
Naming	Starts over.	Can use parent's named grid lines.

2. How Subgrid Inherits Tracks

When you set grid-template-columns: subgrid, the child element no longer defines its own column widths. Instead, it snaps to the columns of the parent grid it is currently occupying.

[!IMPORTANT] The Span Rule: For subgrid to work, the child element must span the correct number of rows or columns in the parent. For example, if your parent has 3 rows, your child needs grid-row: span 3 to subgrid all three.

3. Practical Use Case: Form Labels

Imagine a form where labels and inputs are in a card. With subgrid, you can ensure that all labels in every card are exactly the same width without setting a fixed pixel value.

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2; /* Label (1) + Input (2) */
}

🎯 Practice Challenge: The Uniform Component Row

Create a parent container with grid-template-rows: auto 150px auto (Header, Content, Footer).
Create 3 nested .card items. Spawning them across all 3 rows.
Task 1: Apply grid-template-rows: subgrid to the cards.
Task 2: Add varying amounts of text to the headers. Notice how all headers in the row expand to match the tallest one, keeping the layout perfectly symmetrical.

4. Senior Interview Corner

Q: In what scenario is a standard nested grid NOT enough?

A: When you need internal items (like a header or a button) to align horizontally with their cousins in other components. In a standard nested grid, if Card A has a long title, it only pushes its own content down. In a Subgrid, Card A's long title will push the headers of Card B and Card C down as well, maintaining a perfect horizontal line across the entire UI.

Q: Does subgrid inherit the parent's gap?

A: Yes! By default, a subgrid will use the gap defined on the parent grid. However, you can override this by explicitly setting a new gap on the subgrid element if needed.

CSS Grid Level 2 (Subgrid)

Expert Answer & Key Takeaways

1. The 'Wobbly Header' Problem

The Example: The Subgrid Solution

2. How Subgrid Inherits Tracks

3. Practical Use Case: Form Labels

🎯 Practice Challenge: The Uniform Component Row

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Found an issue or have a suggestion?

CSS Grid Level 2 (Subgrid)

Expert Answer & Key Takeaways

1. The 'Wobbly Header' Problem

The Example: The Subgrid Solution

2. How Subgrid Inherits Tracks

3. Practical Use Case: Form Labels

🎯 Practice Challenge: The Uniform Component Row

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Explore More css

Responsive Web Design (RWD)

Modern Container Queries

Modern UI Layout Patterns

Modern Selectors (:has, :is)

Found an issue or have a suggestion?