The subgrid value

Part of the Level 2 CSS Grid Layout specification deals with the subgrid value. As you read these words, subgrid will already be available to use in modern browsers. However, support may be lacking if you need to support much older browsers.

As ever, you can check support levels at https://caniuse.com/css-subgrid, and read the specification here: https://www.w3.org/TR/css-grid-2/#subgrids.

In essence, subgrid provides a mechanism for non-direct child elements of a grid ancestor to inherit their grid tracks. Using subgrid is as simple as setting subgrid as the value of either grid-template-columns or grid-template-rows, or both.

Let us start with the subgrid value by solving the same problem we solved with display: contents in the last section.

When using the subgrid value, instead, we would set the CSS for .parent like this (you can view the full code in example_05-09):

.parent {
    display: grid;
    grid-template-columns: subgrid...