CSS grid-column property

Property values

start/end

'1/2' means the item is placed between grid lines 1 and 2 i.e. within the first column.

grid-column: 1/2;

start/end

'2/3' means the item is placed between grid lines 2 and 3 i.e. within the second column.

grid-column: 2/3;

start/end

'3/4' means the item is placed between grid lines 3 and 4 i.e. within the third column.

grid-column: 3/4;

start/span columns

The first value represents the grid line and the second value after the span represents the number of columns occupied by the item.

grid-column: 1/span 2;