Creating subgrids
Subgrids are a feature similar to display: contents;. They allow us to arrange child elements in a parent grid. However, the approach of the subgrid feature is different; an element with a subgrid has its own grid that inherits grid lines from its parent grid. We can use a subgrid either for rows, columns, or both.
To apply a subgrid to a child element, we apply display: grid; to it and use subgrid as a value for either grid-template-columns, grid-template-rows, or both.
How to practice
For this section, we need to have either the latest versions of Firefox or Safari because, as of 2023, no Chromium-based browser supports subgrids.
Understanding how subgrids work
At the beginning of this section, we mentioned that a subgrid creates a grid on a child element that inherits grid lines from a parent grid. To illustrate what this means, let’s have a look at the following figure:
Figure 3.20 – A three-by-two grid with...
