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>

两列中的四个项目

2 个答案: