Grid by Example

Everything you need to learn CSS Grid Layout

Subgrid on rows, defined column tracks

To define a subgrid on rows only use the value subgrid on a grid item of the parent as the value of grid-template-rows.

In this example I have then created grid tracks for columns on the subgrid using grid-template-columns: 1fr 1fr 1fr. These column tracks will then fit inside the area that the nested grid is placed in, just as with a regular nested grid.

Read the specification | View example as full page

See the Pen Grid by Example 2.3: subgrid rows, defined column tracks by rachelandrew (@rachelandrew) on CodePen.