我想在桌面上切换网格的第三列和第四列。
我知道我可以为每个元素分配网格顺序,或者为两个 div 使用自己的行,然后设置顺序,但我想避免这两种情况以减少代码。
有没有办法用 css-grid 来实现这一点?我愿意通过 css-flex 寻求解决方案,如果这样更容易的话。
我当前的代码如下所示:
.row{
display: grid;
grid-template-columns: 1fr;
}
@media screen and (min-width: 1200px) {
.row{
grid-template-columns: 1fr 1fr
}
}
.row div{border:1px solid black}
<div class="row">
<div>[IMG]</div>
<div>Text</div>
<div>[IMG]</div>
<div>Text</div>
<div>[IMG]</div>
<div>Text</div>
</div>
最佳答案
您可以使用order带有 flex 或 grid 容器的属性。如果您不想使用 order
,您可以使用 grid-column
和 grid-row
,如下所示。
.row {
display: grid;
grid-template-columns: 1fr;
}
@media screen and (min-width: 1200px) {
.row {
grid-template-columns: 1fr 1fr
}
.row>div:nth-child(3) {
grid-column: 2 / 3;
}
.row>div:nth-child(4) {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
}
.row div {
border: 1px solid black
}
<div class="row">
<div>[IMG]</div>
<div>Text</div>
<div style="background: red">[IMG]</div>
<div style="background: yellow">Text</div>
<div>[IMG]</div>
<div>Text</div>
</div>
关于CSS网格: Switch two specific columns order,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66783559/