我想在桌面上切换我的网格的第3色和第4色。我知道我可以为每个项目分配网格顺序，或者为两个div使用自己的行，然后设置顺序，但我希望避免这两个，以减少代码。
有没有办法用CSS-Grid来实现这一点？我对通过css-flex的解决方案持开放态度，如果这会更容易的话。
我当前的代码如下所示：
null
.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>null
您可以将order属性与flex或网格容器一起使用。如果您不想使用order，可以像下面这样使用grid-column和grid-row。
null
.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>
您可以简单地像下面这样做
null
.row{
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:dense;
}
@media screen and (min-width: 1200px) {
.row div:nth-child(3) {
grid-column:2;
}
}
.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>