How deeply does CSS in Depth, Second Edition cover subgrid?

Explains the alignment principle, builds an author-card layout, demonstrates named lines, and notes browser support without detailing rendering internals.

Subgrid

As explained in CSS in Depth, Second Edition

Subgrid is a CSS Grid feature that lets a nested grid use the grid lines of its parent grid for its rows, columns, or both.

Subgrid lets a nested grid position its rows, columns, or both on the grid lines of its parent. This solves alignment problems that span multiple levels of markup. section 5.5 section 5.7

Aligning author cards

A three-column author-card layout can align each heading, paragraph, and Read More link across every card. Make each card a grid, let it span three parent rows, and inherit those rows with grid-template-rows: subgrid. Short headings then receive space above them, paragraphs begin at the same height, and links align along the bottom.

Subgrid also supports these placement techniques:

Inherited line numbers, line names, and area names can place items within the subgrid; grid-row: 2 places every card title on the second row. section 5.5.1
Additional line names can be assigned after the subgrid keyword, such as subgrid [line1] [line2] [line3] [line4]. section 5.5.1
Use browser grid debugging tools to inspect lines and gaps; support is newer and varies by browser. section 5.5

How CSS in Depth, Second Edition covers it

liveBook manning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

griduses · A grid is a regular arrangement of positions or cells organized by rows and columns or by fixed neighboring relationships.
grid lineuses · A grid line is a horizontal or vertical boundary in a CSS Grid layout that defines track edges and item placement positions.
grid-template-rowsconfigured by · The CSS grid-template-rows property defines the number, sizes, and track structure of a grid's rows.
grid areauses · A grid area is a rectangular region of one or more CSS Grid cells, optionally identified by a name for layout placement.
grid-template-columnsconfigured by · The CSS grid-template-columns property defines the sizes and optional names of a grid’s column tracks and grid lines.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.