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

Question

基于上 一个问题，我正在尝试在我的网格布局中添加更大的块。在最后一个问题中，我需要一个 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 作为包装器元素，因为 我可以使用 说明 这是目前非常先进的技术。我希望有一个 非网格、 非表格的 解决方案。

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

原文由 PaulCo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

保持 HTML 原样，布局在 flexbox 中是不可能的。这主要是因为 2 x 2 框占据了第三列和第四列。你能得到的最接近的是：

 #wrapper{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 180px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  flex-basis: 110px;
}

 <div id="wrapper">
  <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 class="block bigger"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

如您所见，大框在列之间被分解。

正如 您引用的另 一篇文章中所述，由于您的子元素（ .block ）具有固定高度，我们可以确定容器的高度（ .wrapper ）。

通过知道容器的高度，可以使用 flex-direction: column 和 flex-wrap: wrap 来实现上面的布局。

容器上的固定高度用作断点，告诉弹性项目在哪里包装。

或者，如果您可以添加容器，那么布局很容易。只需创建四个嵌套的 flex 容器来容纳第 1、2、3-4 和 5 列，就完成了。

 #wrapper {
  display: flex;
  width: 516px;
}

section {
  display: flex;
  flex-direction: column;
}

.block {
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}

.bigger {
  flex-basis: 110px;
}

section:nth-child(3) {
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 0 200px;
}

section:nth-child(3)>.block:last-child {
  flex: 0 0 190px;
  height: 110px;
}

 <div id="wrapper">
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block bigger"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
</div>

否则，请参阅此帖子了解更多详细信息和其他选项：

• 弹性项目是否可以与它们上方的项目紧密对齐？

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我了解您正在寻找不涉及 HTML Tables 或 CSS Grid Layout 的答案。你提到你不想要 Grid 因为浏览器支持很弱。

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

---

CSS Grid 使您的布局变得简单。无需更改您的 HTML、添加嵌套容器或在容器上设置固定高度（ 请参阅我在此页面上的 flexbox 答案）。

 #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. 建立块级网格容器。
2. grid-template-columns 属性设置明确定义的列的宽度。在这种情况下，网格被指示创建一个 90px 宽度的列，并重复该过程 5 次。
3. grid-auto-rows 属性设置自动生成（ _隐式_）行的高度。这里每一行都是 50px 高。
4. grid-gap 属性是 grid-column-gap 和 grid-row-gap 的简写。此规则在网格项目 之间 设置 10px 的间隙。 （不适用于物品和容器之间的区域。）
5. 指示 .tall 项目从第 1 行到第 3 行和第 2 到 3 列跨越。 *
6. 指示 .wide 项目跨越第 2 到 4 行和第 3 到 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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议