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:

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

css#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:

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

css#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