html - 使元素占据两列

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>

Answer 1

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

.wrapper {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
  background-color: #fff;
  color: #444;
  padding: 1rem;
}

.box {
  background-color: red;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 200%;
}

.a,
.d,
.e,
.f {
  background-color: green;
  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 Grid Layout 规范的 Level 3 包含一个 masonry grid-template-columns 的值和 grid-template-rows布局，尽管浏览器不支持: https://caniuse.com/mdn-css_properties_masonry
在这里了解它: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
所以我改用 grid-auto-flow: dense;在网格上，这使得网格项 G 出现在网格项 F 之前。这不是真正的砖石风格(根据可用 垂直 空间将元素放置在最佳位置)，但通过使网格密集填充来接近所有可用的水平空间以及适合该空间的下一个网格项。

"dense" packing algorithm attempts to fill in holes earlier in the grid

在这里了解它: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
哦，如果你是 CSS 网格的新手，我建议你看 Wes Bos ' 谈论“45 分钟内的 CSS 网格!”: https://www.youtube.com/watch?v=DCZdCKjnBCs