使元素占据两列

Question

我尝试使用 css 和列布局来实现砌体样式，如下面的标记。

我想知道是否有可能使 .green 一个采用两列而不是一列？

先感谢您！

 .parent{
    column-gap: 1rem;
    column-count: 2;
}
.element{
  display:inline-block;
  background:red;
  width:100%;
  height:100px;
}

.green{
  background:green;
}

 <div class="parent">

  <div class="element green">
  </div>

  <div class="element">
  </div>

  <div class="element">
  </div>

  <div class="element">
  </div>

</div>

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

Answer 1

使用 CSS 网格，您可以使用 grid-column: span 2 ：

 .wrapper {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
  padding: 0.5rem;
}

.box {
  background-color: lightblue;
  padding: 0.5rem;
}

.a,
.d,
.e,
.f {
  background-color: lightcoral;
  grid-column: span 2;     /* <-- here is the trick */
}

 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
</div>

在此处了解更多信息： https ://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

关于 砖石 风格：在撰写本文时，CSS 网格布局规范的第 3 级包括 masonry 值 grid-template-columns 和 grid-template-rows 支持布局-df-27几乎不存在： https ://caniuse.com/?search=masonry

在这里了解它： https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

因此，我在网格上使用了 grid-auto-flow: dense; ，这使得网格项 G 出现在网格项 F 之前。这不是真正的 砌体 风格（根据可用的 垂直 空间将元素放置在最佳位置），但它通过制作接近网格 密集 填充所有可用的水平空间，下一个适合该空间的网格项目。

“密集”填充算法尝试在网格中更早地填充孔

在这里了解它： https ://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

哦，如果您是 CSS 网格的新手，我建议您观看 Wes Bos 的演讲“45 分钟了解 CSS 网格！”： https ://www.youtube.com/watch?v=DCZdCKjnBCs

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