两栏中的四项

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中，我是否可以创建一个两列网格，其中项目1和项目2位于第一列，第3项和第4项位于第二列？

divs的高度是可变的，所以这不是严格的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>

​