如何在css网格中将列变成行

Question

我有一个css-grid布局设置为3列。当某个媒体查询匹配时，我希望它作为行流，其中第一列成为第一行，覆盖完整的。第二列和第三列应该成为一行，并且平分空间。我怎样才能做到呢?(我知道如何编写媒体查询，代码仅用于演示)

.thegrid {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 40px;
}

<div class="thegrid">
<div>
content 1
</div>
<div>
content 2
</div>
<div>
content 3
</div>
</div>

Answer 1

如果保留列，并将grid-column: 1/-1添加到第一个div(这确保div覆盖整个网格区域)。这样能达到你想要的效果吗?

Answer 2

你必须显示网格，然后当你的@media屏幕达到它的阈值时，它将开始弯曲。您必须告诉您想要在您的弯曲列中组合哪些行，以及将它们扩展到什么程度。希望这对你有所帮助。好运！

.thegrid {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
@media only screen and (max-width: 600px) {
.thegrid {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.row-1 {
grid-column: 1/ span 2;
grid-row: 1;
}
.row-2 {
grid-row: 2;
}
}

<div class="thegrid">
<div class="row-1">
content 1
</div>
<div class="row-2">
content 2
</div>
<div class="row-2">
content 3
</div>
</div>