css - Haga que un div abarque dos filas en una cuadrícula

css3 flexbox

Question

Tengo una página llena de bloques que se amontonan con display: inline-block . Quiero hacer cuatro o dos veces más grande, así que usé float: left o right para colocar otros bloques.

Mi problema es que si tengo una fila de cinco elementos , ¿cómo podría poner un elemento más grande en el medio ? (como float póngalo naturalmente al costado).

Aquí hay un fragmento de ejemplo:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}

<div id="wrapper">
  <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 bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Esto es lo que me gustaría tener del fragmento de arriba

Answer 1

Para que su diseño funcione con flexbox, debe usar contenedores anidados o conocer la altura del contenedor ( consulte 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. Establecer 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. Las filas de la cuadrícula se crearán implícitamente (es decir, automáticamente, según sea necesario). Cada fila implícita debe tener una altura de 50 px. ( referencia de especificación )
4. Las canaletas alrededor de los elementos de la cuadrícula. grip-gap es la abreviatura de grid-row-gap y grid-column-gap . ( referencia de especificaciones )
5. Indique al elemento grande que abarque desde las líneas de fila 1 a 3. (Hay tres líneas de fila en una cuadrícula de dos filas) ( referencia de especificación ).
6. Indique al elemento grande que abarque 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 especificación )

Soporte de 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: no se admite la especificación actual; admite versión obsoleta

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

Answer 2

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

Al conocer la altura del contenedor, se puede lograr su diseño 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 artículos flexibles no pueden envolverse a menos que haya una altura / ancho fijo en el contenedor: https://.com/a/43897663/3597276