title: How can I make a div span multiple rows and columns in a grid?
body: <p>Building off of <a href="https://stackoverflow.com/questions/42946454/alternative-to-css-grid-layout-but-not-tables">a previous question</a>, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span multiple rows <em>and columns</em>. </p>
  
  <p>If I have a <strong>five-element row</strong>, how could I put bigger elements <strong>in the middle</strong> of it? (as <code>float</code> puts 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;
  }
  .larger{
    height: 110px;
    width: 190px;
  }</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 bigger"&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 larger"&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&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't want to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="noreferrer"><code>display: grid</code></a> for the wrapper element, as <em>Can I Use</em> <a href="http://caniuse.com/#feat=css-grid" rel="noreferrer">states</a> this is a pretty on-the-edge technology right now. I was hoping for a <strong>non-grid</strong>, <strong>non-table</strong> solution.</p>
  
  <p>Here's what I would like to have from the snippet above <a href="https://i.stack.imgur.com/M0ufD.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/M0ufD.jpg" alt="Expected"></a></p>