我有一个带有四个网格区域的网格布局,在桌面上布局更改为两列。
第二个网格项目作为第一个项目放置在侧边栏中,然后是最后一个网格项目。我想做的是将第四个网格项目向上拉,以便将其放置在第二个项目之后。
但是当我使用网格时,你不能这样做,因为它需要填充网格区域。是否可以使用网格?
尝试使布局垂直压缩以填补侧边栏中的空白。
我会使用网格来管理布局的水平组件来实现此设计,但使用 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>