css - 如何使 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: gridwrapper 元素，因为Can I Use 指出这是目前非常先进的技术。我希望有一个非网格、非表格的解决方案。

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

score 18 · Accepted Answer

我了解您正在寻找不涉及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

这个怎么运作：

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

score 3 · Accepted Answer

Keeping your HTML as-is, the layout is not natively possible with flexbox. This is primarily because of the 2 x 2 box occupying the third and fourth columns. The closest you can get is this:

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

As you can see, the big box is broken up between columns.

As mentioned in the other post you referenced, since you have fixed heights on your child elements (.block), we can determine the height of the container (.wrapper).

By knowing the height of the container, the layout above can be achieved using flex-direction: column and flex-wrap: wrap.

A fixed height on the container serves as a breakpoint, telling flex items where to wrap.

Alternatively, if you can add containers, then the layout is easy. Just create four nested flex containers to hold columns 1, 2, 3-4 and 5, and you're done.

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

Otherwise, see this post for more details and other options:

Is it possible for flex items to align tightly to the items above them?

score 1 · Accepted Answer

使用 flexbox 和 flex-direction: row 来实现。

#wrapper{
  width: 516px;
  display: flex;         /* added */
  flex-flow: row wrap;   /* added */
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.block:last-child {
  margin-left: 205px;    /* added */
}
.bigger{
  height: 110px;
  margin-bottom: -55px;  /* added */
}
.larger{
  height: 110px;
  width: 190px;
  margin-left: 105px;    /* added */
  margin-bottom: -55px;  /* added */
}

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

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

3 回答 3

jsFiddle

Related

Reference