1

When you set a css grid, and define columns only, not rows, the browser will spread the elements according to your settings. All elements inside the block will be arranged one by one to the end of the grid. If you have set 4 columns to your grid but have 8 elements, the browser will place the first 4 in the fisrt row and the other four in the second row automatically.
Like in this grid, we have set 3 columns but we have 6 elements in the block. "display: grid="1fr 3fr 1fr" The rows are filled as the elements are placed in the block. Read section 2 to find out about the gap and why we have 3 rows and not two, and why there is a blank space at the bottom of the grid.

2

OK.
Now, look the way we set the grid: 1fr 3fr 1fr. What does this mean? It simply means that the second column is 3 times the size of the others. Thats why, you see the second column larger than the others. Have you noticed?
The other thing that is important to know about this grid, is that I have set the third column to be expanded up to 3 rows if necessary.
This is how you do it: First you have to name the element you want to expand. In this case the third one. On your stylesheet you write #'Id_name' { grid-row: span 3; }
I wanted the third column to expand 3 rows, so I set it to 3. Thats why you see the darker column expanding 3 rows.
The problem with the grid is that all the rows will have the same height, and they will be set automatically to the larger one. In this example, the first column is larger, so the second column is not completely filling the whole space reserved for it.

3

THIS IS THE THIRD COLUMN.

This is the row I've chosen to expand 3 rows. Doesn't matter what content I have inside. The browser will set it to three. As stated in the second paragraph, 'span' is the keyword responsible for expanding the column. In my example I gave span the value of 3. See the sintax above.
Don't worry about the format, I have changed the colors so that it can stand out among the others.

4

This is the fourth child of the container, or simply the fourth element.
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

5

This is the fifth child of the container, or simply the fifth element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

6

This is the sixth child of the container, or simply the sixth element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.