使div在网格中跨越两行

Question

我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.

我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).

这是一个示例代码段:

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

以下是我希望从上面的代码段中获得的内容

Answer 1

你的子元素(.block)有固定的高度.根据这些信息,我们可以推断出容器的高度(#wrapper).

通过了解容器的高度,可以使用带有和的CSS Flexbox实现布局.flex-direction: columnflex-wrap: wrap

容器上的固定高度用作断点,告诉flex项目在哪里换行.

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

的jsfiddle

这里解释了为什么flex项目无法包装,除非容器上有固定的高度/宽度:https://stackoverflow.com/a/43897663/3597276

Answer 2

要使您的布局与flexbox一起使用,您需要使用嵌套容器或知道容器的高度(请参阅本页的其他答案).Grid不是这样.代码结构非常简单.

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

的jsfiddle

笔记:

1. 建立块级网格容器.(规格参考)
2. 指示网格创建90px宽度的列,并重复该过程5次.(规格参考)
3. 将隐式创建网格行(即,根据需要自动创建).每个隐含行的高度应为50px.(规格参考)
4. 网格项目周围的排水沟.grip-gap是grid-row-gap和grid-column-gap.的缩写.(规格参考)
5. 指示大项目从行1到3跨越.(在两行网格中有三行线.)(规范参考).
6. 指示大项目跨越网格列线2到3.(五列网格中有六个列线.)(规范参考)

浏览器支持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