The grid item’s position: grid-column-start and grid-column-end

So, now we know what will happen if we specify the starting coordinates of the grid cell by row and column: its size will be automatically adjusted to be equal to one “division” of the grid.

If we want to extend the grid cell to several rows or columns, then we need to make sure to specify the line where the cell ends in addition to the line where it begins.

In the example above, the cell starts on row line 3 and ends on row line 5.

We have the grid-column-end property to designate the end of the cell in columns.

In other words, we will write the following in the code:

grid-column-start: 3 means that the element starts with the 3rd column line.
grid-column-end: 5 means that the element ends on the 5th column line.

Now let’s try to create a cell that will be placed across two columns.