Automatic coordinates of elements in the grid: columns and rows

The grid-template-rows property works similarly to grid-template-columns, only it tells the grid how many rows it will contain and what height they will be. For example, the grid-template-rows: 100px 200px 100px; entry tells the grid:

You will have three rows: the first has a height of 100px, the second has a height of 200px, and the third has a height of 100px.

If the columns are not assigned explicit parameters, then there will only be one column by default, and the elements inside it will be stretched across the entire width of the column.

If the grid contains rows that have not been assigned an explicit height, then the remaining free space to be allocated to height in grid-template-rows will be distributed among them equally.

Thus, you can now create the grids that you need given what you know about how cells are distributed in grids and utilizing the grid-template-columns and grid-template-rows properties.