在网格中创建一个div跨两行

Question

在网格中创建一个div跨两行

我有一页堆积如山的积木display: inline-block..我想要大四到两倍，所以我用float: left或right把其他街区围起来。

我的问题是如果我有五元行，我怎么能把一个更大的元素中间是吗？(如float自然地放在一边)。

下面是一个示例片段：

#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>