不使用JS的网格布局不均匀

Question

我想在没有js的情况下创建这样的东西：

添加捕获量，当屏幕尺寸低于一定大小时，元素B插入A和C之间。

我尝试使用css网格（哪种工作），但后来意识到列和行是固定的。含义A将占用与B和C一样多的空间从B的末尾开始（参见下图中元素之间的空白）：

https://jsfiddle.net/02preLew/

(1,2,H,W)

如果没有JS，还有另一种解决方法吗？

Answer 1

您是否绝对使用网格行和列销售？因为您可以将这些更改包装在所选大小的媒体查询中。

https://codepen.io/Robhern135/pen/LezBae

使用display:block并设置宽度和顺序将允许您想要的内容。

body {
  margin: 40px;
}

.wrapper {
    display: block; /*change*/
    grid-gap: 10px;
    grid-template-columns: 600px 300px;
    background-color: #fff;
    color: #444;

}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
width:100%;/*change*/
margin: 5px 0;/*change*/
}

.a {

order:1;/*change*/
}
.b {

order:2;/*change*/
}
.c {

order:3;/*change*/
}

我已使用/*change*/

标记了重要部分

我希望这有帮助！