Haz que un div abarque dos filas en una cuadrícula

Solución:

Tiene alturas fijas en sus elementos secundarios (.block). Con base en esa información, podemos extrapolar la altura del contenedor (#wrapper).

Al conocer la altura del contenedor, su diseño se puede lograr utilizando CSS Flexbox con flex-direction: column y flex-wrap: wrap.

Una altura fija en el contenedor sirve como punto de interrupción, indicando a los artículos flexibles dónde envolver.

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

Aquí hay una explicación de por qué los elementos flexibles no se pueden envolver a menos que haya una altura / ancho fijo en el contenedor: https://stackoverflow.com/a/43897663/3597276

Para que su diseño funcione con flexbox, necesita usar contenedores anidados o conocer la altura del contenedor (vea mi otra respuesta en esta página). No es así con Grid. La estructura del código es muy simple.

#wrapper {
  display: grid;                                     /* 1 */
  grid-template-columns: repeat(5, 90px);            /* 2 */
  grid-auto-rows: 50px;                              /* 3 */
  grid-gap: 10px;                                    /* 4 */
  width: 516px;
}
.bigger {
  grid-row: 1 / 3;                                   /* 5 */
  grid-column: 2 / 3;                                /* 6 */
}
.block {
  background-color: red;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

Notas:

1. Establezca un contenedor de cuadrícula a nivel de bloque. (referencia de especificación)
2. Indique a la cuadrícula que cree una columna de 90 píxeles de ancho y repita el proceso 5 veces. (referencia de especificación)
3. Se crearán filas de cuadrícula implícitamente (es decir, automáticamente, según sea necesario). Cada fila implícita debe tener una altura de 50 píxeles. (referencia de especificación)
4. Las canaletas alrededor de los elementos de la cuadrícula. grip-gap es una abreviatura de grid-row-gap y grid-column-gap. (referencia de especificación)
5. Indique al artículo grande que se extienda desde las líneas de fila 1 a 3. (Hay tres líneas de fila en una cuadrícula de dos filas) (referencia de especificaciones).
6. Indique al elemento grande que se extienda desde las líneas de columna de la cuadrícula 2 a 3. (Hay seis líneas de columna en una cuadrícula de cinco columnas) (referencia de especificaciones)

---

Soporte del navegador para CSS Grid

• Chrome: soporte completo a partir del 8 de marzo de 2017 (versión 57)
• Firefox: soporte completo a partir del 6 de marzo de 2017 (versión 52)
• Safari: soporte completo a partir del 26 de marzo de 2017 (versión 10.1)
• Edge: soporte completo a partir del 16 de octubre de 2017 (versión 16)
• IE11: sin soporte para la especificación actual; admite versión obsoleta

Aquí está la imagen completa: http://caniuse.com/#search=grid

---

---

Utiliza Nuestro Buscador