Creating a polyfill for subgrid
First, let’s create a polyfill for subgrid. The subgrid keyword is a possible value for both grid-template-rows and grid-template-columns. Usually, it is used with nested grids when we want to reuse the grid rows and columns of a parent element. However, it does not simply copy the entire grid definition. The subgrid keyword is meant to keep the grid intact in this element.
Understanding how subgrid is meant to work
For subgrid to have any effect, the element should span multiple rows, columns, or both, depending on which declaration uses it. For example, consider the following grid:
.grid-container {
width: 800px;
display: grid;
grid-template-columns: 100px 1fr 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px;
gap: 10px;
}
It consists of five columns, one occupying all remaining space, while the others have a fixed width of 100px. It also has five rows...
