Welcome to Part 21 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Subgrid.

Historically, CSS Grid child elements could not easily align with the main grid structure if they were wrapped inside nested containers. The parent grid layout context did not pass down through nested blocks. Subgrid (introduced in modern CSS Grid Level 2) resolves this constraint. It allows a nested grid child to inherit the exact row and column track definitions of its parent grid, enabling perfect horizontal and vertical alignment across separate container cards.

---

Chapter 125: Introduction to Subgrid

21.1 The Nested Grid Alignment Challenge

Suppose you have a 3-column card grid, where each card contains a header, a paragraph, and a button. If card content lengths vary, the headers and buttons inside card A will not align with those inside card B:

• Without subgrid, each card has its own local row sizing, meaning buttons might render at slightly different heights.
• With subgrid, all card contents share the parent grid’s row tracks, locking card headers and footers to exactly the same horizontal line.

---

Chapter 126: Track Inheritance Syntax

To use subgrid, set the display property of a grid child element to grid, and assign the subgrid keyword to its column or row templates:

21.2 Inheriting Columns

.parent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.nested-grid-child {
  grid-column: 1 / 4; /* Spans 3 columns of parent */
  display: grid;
  /* Inherits the exact widths of parent's 3 spanned columns */
  grid-template-columns: subgrid;
}

21.3 Inheriting Rows

.parent-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* 3 explicit row tracks */
}

.card {
  grid-row: span 3; /* Spans across all 3 vertical parent rows */
  display: grid;
  /* Inherits row heights from parent, aligning headers/footers */
  grid-template-rows: subgrid;
}

---

Chapter 127: Subgrid Gaps & Styling

21.4 Gap Inheritance Rules

By default, a subgrid inherits the gap settings of its parent grid. However, you can override this behavior locally by declaring a new gap value on the subgrid container:

.nested-subgrid {
  grid-template-columns: subgrid;
  gap: 5px; /* Overrides the parent grid's larger gap */
}

---

Chapter 128: Subgrid Practice & Self-Check

21.5 Practice Exercises

1. Exercise 1: Aligned Product Cards Grid: Create a product grid wrapper where card elements align their content blocks using subgrid.

   .grid-shelf {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: auto auto auto; /* header, content, footer */
     gap: 20px;
   }
   .shelf-card {
     grid-row: span 3;
     display: grid;
     grid-template-rows: subgrid;
   }

21.6 Self-Check Questions

1. What limitation of standard nested grids does subgrid resolve?
   • Answer: It allows child elements of nested containers to align with the columns and rows of the parent grid.
2. What value must be assigned to grid-template-columns to activate subgrid column inheritance?
   • Answer: subgrid.
3. Do subgrids inherit gaps from parent grids by default?
   • Answer: Yes, subgrids inherit parent gap settings unless overridden.
4. Does an element using subgrid require display: grid to be set?
   • Answer: Yes, it must be declared as a grid container first.
5. Can you inherit rows but define custom columns inside a single subgrid?
   • Answer: Yes, by setting grid-template-rows: subgrid and declaring standard track values for grid-template-columns.
6. What happens if a subgrid item spans 3 columns of the parent grid but contains 4 child elements?
   • Answer: The 4th item is placed into the implicit grid, appearing outside the subgrid track alignments.
7. Is subgrid supported in all modern web browsers?
   • Answer: Yes, subgrid has full support in modern browsers.
8. What is the difference between inheriting tracks and nesting grid definitions manually?
   • Answer: Manual nesting sets local constraints; subgrid links sizing directly to the parent layout coordinates.
9. Can a subgrid declare its own z-index settings?
   • Answer: Yes, subgrids behave like standard positioned grid elements.
10. Does subgrid ignore parent margins?
    • Answer: No, margins on subgrid items are calculated within the parent cells they reside in.