如何使 div 跨越网格中的多行和多列？

建立在上一个问题 https://stackoverflow.com/questions/42946454/alternative-to-css-grid-layout-but-not-tables，我正在尝试向我的网格布局添加更大的块。在最后一个问题中，我需要一个 div 跨越多行。现在的问题是我需要一个div来跨越多行和列.

如果我有一个五元素行，我怎样才能放入更大的元素在中间它的？ （作为float自然地放在一边）。

这是一个示例片段：

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

<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 larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想使用display: grid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout对于包装元素，如我可以用吗 states http://caniuse.com/#feat=css-grid这是目前非常先进的技术。我本来希望有一个non-grid, 非表解决方案。

Here's what I would like to have from the snippet above

我知道您正在寻求一个不涉及的答案HTML 表格 or CSS 网格布局。您提到您不想要网格，因为浏览器支持较弱。

然而，大约在您发布问题的同时，大多数主要浏览器发布了新版本，为网格布局提供全面支持（请参阅下面的详细信息）。

CSS Grid https://www.w3.org/TR/css3-grid-layout/使您的布局变得简单。无需更改 HTML、添加嵌套容器或在容器上设置固定高度（请参阅此页面上我的弹性盒答案 https://stackoverflow.com/a/43125050/3597276).

#wrapper {
  display: grid;                            /* 1 */
  grid-template-columns: repeat(5, 90px);   /* 2 */
  grid-auto-rows: 50px;                     /* 3 */
  grid-gap: 10px;                           /* 4 */
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          /* 5 */
  grid-column: 2 / 3;                       /* 5 */
}

.wide {
  grid-row: 2 / 4;                          /* 6 */
  grid-column: 3 / 5;                       /* 6 */
}

.block {
  background-color: red;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block tall"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle https://jsfiddle.net/4qg47bLq/1/

怎么运行的：

1. 建立块级网格容器。 https://www.w3.org/TR/css3-grid-layout/#grid-containers
2. The grid-template-columns https://www.w3.org/TR/css3-grid-layout/#track-sizing属性设置显式定义的列的宽度。在本例中，网格被指示创​​建一个 90px 宽度的列，并重复该过程 5 次。
3. The grid-auto-rows https://www.w3.org/TR/css3-grid-layout/#auto-tracks属性设置自动生成的高度（implicit）行。这里每行高 50 像素。
4. The grid-gap https://www.w3.org/TR/css3-grid-layout/#gutters属性是grid-column-gap and grid-row-gap。此规则设置 10px 间隙between网格项目。 （它不适用于物品和容器之间的区域。）
5. 指示.tall项目跨越行线 1 至 3 和列线 2 至 3。 https://www.w3.org/TR/css3-grid-layout/#placement-shorthands*
6. 指示.wide项目跨越行线 2 到 4 和列线 3 到 5。 https://www.w3.org/TR/css3-grid-layout/#placement-shorthands*

^{* In a five-column grid there are six column lines. In a three-row grid there are four row lines.}

CSS 网格的浏览器支持

• Chrome - 自 2017 年 3 月 8 日起全面支持（版本 57）
• Firefox - 自 2017 年 3 月 6 日起全面支持（版本 52）
• Safari - 自 2017 年 3 月 26 日起全面支持（版本 10.1）
• Edge - 自 2017 年 10 月 16 日起全面支持（版本 16）
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片：http://caniuse.com/#search=grid http://caniuse.com/#search=grid