Combinación de filas en CSS Grid

Las filas y columnas en los grids forman una cuadrícula. Es posible hacer que un elemento ocupe no una sola celda de la cuadrícula, sino varias.

Para que un elemento ocupe más de una fila, se debe asignar la propiedad grid-row. En esta propiedad, separados por una barra, se indican los números que especifican la posición inicial y final de los elementos en el grid.

En este caso, el elemento se extenderá desde la primera posición hasta la segunda posición (sin incluirla). Es decir, el valor 1 / 2 hará que el elemento ocupe una sola primera celda, y el valor 1 / 3 hará que el elemento ocupe la primera y la segunda celda (pero sin incluir la tercera).

Ejemplo

Supongamos que tenemos un grid con tres elementos hijos. Coloquémoslos de modo que el primer elemento ocupe dos filas:

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; /* dos filas */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

Ejemplo

Ahora asignemos al cuarto bloque tres filas:

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;
}

Результат:

Tareas prácticas