css - 如何让一个 div 跨越网格中的多行和多列？

Question

建立于 a previous question ，我正在尝试向我的网格布局添加更大的 block 。在最后一个问题中，我需要让一个 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对于包装器元素，我可以使用吗 states这是目前非常前沿的技术。我希望有一个非网格、非表格的解决方案。

这是我想从上面的代码片段中得到的

Answer 1

我了解到您正在寻找不涉及 HTML 表格 或 CSS 网格布局 的答案。您提到您不想要 Grid，因为浏览器支持较弱。

但是，大约在您发布问题的同时，大多数主要浏览器都发布了新版本，完全支持网格布局(请参阅下面的详细信息)。

---

CSS Grid使您的布局简单。无需更改 HTML、添加嵌套容器或在容器上设置固定高度 ( see my flexbox answer on this page)。

#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

工作原理:

1. Establish a block-level grid container.
2. grid-template-columns属性设置明确定义的列的宽度。在这种情况下，网格被指示创​​建一个 90px 宽度的列，并重复该过程 5 次。
3. grid-auto-rows属性设置自动生成(隐式)行的高度。这里每行高 50 像素。
4. grid-gap property 是 grid-column-gap 和 grid-row-gap 的简写。此规则在 网格项之间设置了 10 像素的间距。 (不适用于元素与容器之间的区域。)
5. Instruct the .tall item to span from row lines 1 to 3 and column lines 2 to 3. *
6. Instruct the .wide item to span from row lines 2 to 4 and column lines 3 to 5. *

^{* 在五列网格中有六行列。在三行网格中有四行线。}

---

浏览器对 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