CSS 网格：压缩侧边栏项目高度

Question

|

我有一个带有四个网格区域的网格布局，在桌面上布局更改为两列。

第二个网格项目作为第一个项目放置在侧边栏中，然后是最后一个网格项目。我想做的是将第四个网格项目向上拉，以便将其放置在第二个项目之后。

但是当我使用网格时，你不能这样做，因为它需要填充网格区域。是否可以使用网格？

尝试使布局垂直压缩以填补侧边栏中的空白。

Answer 1

我会使用网格来管理布局的水平组件来实现此设计，但使用 Flex 来管理布局的垂直组件。

.layout {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.layout>* {
  display: contents;
}

.cell {
  color: white;
  padding: 1em;
  border-radius: 0.5em;
  background-color: blue;
}

.c1 {order: 1;}
.c2 {order: 3;}
.c3 {order: 2;}
.c4 {order: 4;}

@media (min-width: 600px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

  .layout>* {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
}

<div class="layout">
  <div>
    <div class="cell c1">1<br><br>1</div>
    <div class="cell c2">2<br><br>2<br><br>2</div>
  </div>
  <div>
    <div class="cell c3">3</div>
    <div class="cell c4">4</div>
  </div>
</div>