使元素占据两列 [英] Make element take two columns

问题描述

我尝试使用css来实现砌体风格，其列布局类似于下面的标记.

I tried to achieve the masonry style using css with the column layout like the markup below.

我想知道是否可以将.green设为一列而不是两列吗?

I want to know if it's possible to make the .green one to take two columns instead of one?

提前谢谢！

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

推荐答案

以下是使用grid-column: auto / span 2的灵活方法:

Here is a flexible approach using grid-column: auto / span 2:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100px 100px 100px;
  background-color: #fff;
  color: #444;
  padding: 20px;
}

.box {
  background-color: red;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a,
.g {
  background-color: green;
  grid-column: auto / span 2;
}

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

这篇关于使元素占据两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！