Tengo una página llena de bloques que se acumulan condisplay: inline-block. Quiero hacer cuatro o dos veces más grande, así que solíafloat: left oright para poner otros bloques alrededor.

Mi problema es si tengo unfila de cinco elementos, ¿cómo podría poner un elemento más grandeen el medio de eso? (comofloat ponlo naturalmente a un lado).

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