Sometimes, some items are assigned positions outside the existing grid. For example, the grid has only 3 columns, but a certain item is specified in row 5. 

At this point, the browser will automatically generate a redundant grid for placing items.

grid-auto-columns and grid-auto-rows properties are used to set the column width and row height of the redundant grid that the browser automatically creates. 

They are written exactly the same as grid-template-columns and grid-template-rows. 

If these two properties are not specified, the browser will determine the column width and row height of the newly added grid based on the size of the cell content.

In the example below, the divided grid is 3 rows x 3 columns, but item 8 is assigned to row 4 and item 9 is assigned to row 5.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

The above code specifies that the new line height is uniformly 50px (the original line height is 100px).