title: Make a div span two rows in a grid
body: <p>I have a page full of blocks which pile up with <code>display: inline-block</code>. I want to make some four or two times bigger, so I used <code>float: left</code> or <code>right</code> to put other blocks around.</p>
  
  <p>My problem is if I have a <strong>five-element row</strong>, how could I put a bigger element <strong>in the middle</strong> of it? (as <code>float</code> put it naturally on the side).</p>
  
  <p>Here's an example snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper{
    width: 516px;
  }
  .block{
    display: inline-block;
    width: 90px;
    height: 50px;
    margin: 5px;
    background-color: red;
  }
  .bigger{
    height: 110px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block bigger"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's what I would like to have from the snippet above <a href="https://i.stack.imgur.com/2TzqH.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/2TzqH.jpg" alt="Expected"></a></p>