Como foi possível obervar, a mescla de itens do grid é uma forma de localiza-los dentro do grid e de definir seu tamanho. Tudo vai depender das coordenadas repassadas.
Existe, porém, uma forma simplificada de dar a mesma coordenada para os ítens.
Vejamos o exemplo abaixo.
Aqui as coordenadas foram passadas utilizando os elementos padrão: grid-column-start: e grid-column-end:, grid-row-start: e grid-row-end:
No exemplo abaixo o mesmo resultado foi obtido, utilizando a forma simplificada.
O elemento grid-column: 1 / 5; é idêntico ao elemento grid-column-start: 1; grid-column-end: 5;. Os valores correspondem às linhas verticais imaginárias 1 e 4.
O Elemento span, por sua vez, não se refere à linha, mas ao ítem.
Sendo assim o elemento grid-column: 1 / 3; corresponde ao elemento grid-column: 1 / span 2; e o elemento grid-row: 2 / 4; corresponde ao elemento grid-row: 2 / span 3; .