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

问题描述 投票:0回答:1

Mobile

Desktop: current | Desktop: preferred

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

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

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

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

css-grid
1个回答
0
投票

我会使用网格来管理布局的水平组件来实现此设计,但使用 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>

© www.soinside.com 2019 - 2024. All rights reserved.