使div在网格中跨两行

Question

我有一个满是块的页面，这些块用display:inline-block堆积起来。 我想使一些块大四到两倍，所以我使用float:left或right来放置其他块。

我的问题是，如果我有一个五元素行，我怎么能在它中间放一个更大的元素呢？ （如float将其自然地放在侧面）。

下面是一个示例片段:

null

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

null

Answer 1

为了让您的布局与flexbox一起工作，您需要使用嵌套容器，或者知道容器的高度（请参阅本页我的另一个答案）。 网格就不是这样了。 代码结构非常简单。

null

#wrapper {
  display: grid;                                     /* 1 */
  grid-template-columns: repeat(5, 90px);            /* 2 */
  grid-auto-rows: 50px;                              /* 3 */
  grid-gap: 10px;                                    /* 4 */
  width: 516px;
}
.bigger {
  grid-row: 1 / 3;                                   /* 5 */
  grid-column: 2 / 3;                                /* 6 */
}
.block {
  background-color: red;
}

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

Answer 2

您的子元素(.block)具有固定的高度。 基于该信息，我们可以外推容器的高度(#wrapper)。

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

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

null

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  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 bigger"></div>
  <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>