两列四项

Question

我有这个 HTML

<div class='wrapper'>
 <div class='item-1'>One</div>
 <div class='item-2'>Two</div>
 <div class='item-3'>Three</div>
 <div class='item-4'>Four</div>
</div>

在 CSS 中，我是否可以创建一个两列网格，其中 item-1 和 item-2 位于第一列，而 item-3 和 item-4 位于第二列？

div 的高度是可变的，所以这不是严格的 2x2 网格。

基本上，我希望它看起来像下面的示例，但我没有包装我的物品的奢侈。

谢谢！

.wrapper {
  display:grid;
  grid-template-columns: 1fr 1fr;
}

    <div class='wrapper'>
      <div class='wrapper-1'>
       <div class='item-1' style='height:100px;background-color:red;'>One</div>
       <div class='item-2' style='height:80px;background-color:blue;'>Two</div>
     </div>
     <div class='wrapper-2'>
       <div class='item-3' style='height:40px;background-color:orange;'>Three</div>
       <div class='item-4' style='height:40px;background-color:green;'>Four</div>
      </div>
    </div>

Answer 1

包装器的 CSS 是正确的。您唯一需要指定的是每个项目应从网格的哪一行开始和结束。

.item-1, 
.item-2{
grid-column: 1/2;
width: 100%;
}

.item-3, 
.item-4{
grid-column: 3/4;
width: 100%;
}

Answer 2

这应该适合您的需求。请注意，包装器需要具有明确的高度才能使列包装，否则它将无休止地扩展。

.wrapper {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.item {
  width: 50%;
}

.i-1 {
  height: 100px;
  background-color: green;
}

.i-2 {
  height: 80px;
  background-color: red;
}

.i-3 {
  height: 40px;
  background-color: blue;
}

.i-4 {
  height: 40px;
  background-color: yellow;
}

<div class='wrapper'>
 <div class='item i-1'>One</div>
 <div class='item i-2'>Two</div>
 <div class='item i-3'>Three</div>
 <div class='item i-4'>Four</div>
</div>