In addition to specifying the start and end lines by number, you can specify a start line and then the number of tracks you would like the area to span.
grid-row: 1 / span 3;
grid-row: 1 / span 2;
grid-column: 2 / span 2;
You can also use the
span keyword in the value of
grid-column-start/grid-column-end. The following two examples will create the same grid area. In the first we set the start row line, then the end line we explain that we want to span 3 lines. The area will start at line 1 and span 3 lines to line 4.
grid-row-end: span 3;
In the second example, we specify the end row line we want the item to finish at and then set the start line as
span 3. This means the item will need to span upwards from the specified row line. The area will start at line 4 and span 3 lines to line 1.
grid-row-start: span 3;
To become familiar with line based positioning in grid try to build a few common layouts by placing items onto grids with varying numbers of columns. Remember that if you do not place all of the items, any leftover items will be placed according to auto-placement rules. This may result in the layout you want, but if something is appearing somewhere unexpected, check that you have set a position for it.
Also, remember that items on the grid can overlap each other when you place them explicitly like this. That can create some nice effects, however you can also end up with things overlapping incorrectly if you specify the wrong start or end line. The Firefox Grid Highlighter can be very useful as you learn, especially if your grid is quite complicated.