Unindo linhas em grades CSS

Linhas e colunas formam a grade no Grid. É possível fazer com que um elemento ocupe não apenas uma célula da grade, mas várias.

Para que um elemento ocupe mais de uma linha, deve-se definir a propriedade grid-row. Nesta propriedade, os números que indicam a posição inicial e final do elemento na grade são definidos separados por uma barra.

Neste caso, o elemento se estenderá da primeira posição até a segunda posição (sem incluí-la). Ou seja, o valor 1 / 2 fará com que o elemento ocupe apenas a primeira célula, e o valor 1 / 3 fará com que o elemento ocupe a primeira e a segunda célula (mas sem incluir a terceira).

Exemplo

Suponha que temos uma grade com três elementos filhos. Vamos posicioná-los de modo que o primeiro elemento ocupe duas linhas:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* duas linhas */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Exemplo

Agora vamos atribuir três linhas ao quarto bloco:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Tarefas práticas

Posicione todos os elementos e execute a união de linhas de acordo com o seguinte exemplo: