Параметр span
указывает, сколько ячеек надо объединить.
В Вашем случае элемент растягивается на 2 ячейки столбцов.
Так как не указано начало отсчёта - счёт идёт от начала элемента button
, а именно с первого столбца.
Выражение grid-column: span 2;
эквивалентно grid-column: 1 / span 2;
Если вместо 1 вы укажете 2 (grid-column: 2 / span 2;
), то элемент button
будет растягиваться на 2 ячейки столбцов начиная со второго столбца.
Параметр grid-row
объединяет ячейки не столбцов, а строк.
Например, имея несколько строк, используя grid-row: span 2;
Вы можете объединить 2 строки в одну.