Javascript 在CSS网格布局中填充空单元格

我有一组div tile，我已经通过CSS网格布局尽可能“自动”地排列了它们；我的最后一个想法是，即使我不知道有多少瓷砖，它们的大小和位置都是正确的。这很好用

现在，我希望将单击的任何平铺的面积增加一倍。据我所知，这意味着增加瓷砖的跨度：

grid-row: span 2;
grid-column: span 2;

如果单击不在最右边列中的任何平铺，我会对结果感到满意。当最右边的瓷砖展开时，它们将被包裹到下一行

有没有办法强制这些磁贴向左扩展，以便将其他非活动磁贴包裹起来

代码笔示例

$（'div.tile'）。单击（函数（）{
$（'div.tile'）.not（this.removeClass（'selected'）；
$（this.toggleClass（'selected'）；
/*
尝试查找当前位置，看看是否可以根据结果更改范围规则。可能忽略。
*/
var colCount=$（'div.wrapper'）.css（'grid-template-columns'）.split（''）.length；
console.log（colCount）；
var placement=$（this.css（'grid-row'）；
控制台日志（放置）；
});
正文{
保证金：0；
填充：0；
背景色：#eee；
}
.包装纸{
显示：网格；
利润率：18px；
网格模板列：重复（自动填充，最小值（252px，1fr））；
网格自动行：286px；
栅隙：18px；
}
.瓷砖{
位置：相对位置；
背景色：#eee；
背景色：#149；
文本对齐：居中；
框阴影：
0 3px 12px rgba（0,0,0,0.15），
4px6pxrgba（0,0,0,0.25）；
}
.瓦片{
网格行：跨度2；
格构柱：跨度2；
}
.tile.selected:：before{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
背景色：rgba（255255.2）；
}

A.
B
C
D
E
F
G
H
我
使用CSS网格自动放置
CSS
网格自动流属性控制自动放置的网格项在网格中的放置方式

此属性有三个可能的值：


行
（默认值）
列
densed

使用
密集
，自动放置算法会用适合的项目填充未占用的单元格

这是您的代码，在网格容器上有
网格自动流：dense
：


$（'div.tile'）。单击（函数（）{
$（'div.tile'）.not（this.removeClass（'selected'）；
$（this.toggleClass（'selected'）；
var colCount=$（'div.wrapper'）.css（'grid-template-columns'）.split（''）.length；
console.log（colCount）；
var placement=$（this.css（'grid-row'）；
控制台日志（放置）；
});
正文{
保证金：0；
填充：0；
背景色：#eee；
}
.包装纸{
显示：网格；
利润率：18px；
网格模板列：重复（自动填充，最小值（252px，1fr））；
网格自动行：286px；
栅隙：18px；
栅格自动流动：密集；/*新*/
}
.瓷砖{
位置：相对位置；
背景色：#eee；
背景色：#149；
文本对齐：居中；
盒影：0 3px 12px rgba（0,0,0,0.15），0 4px 6px rgba（0,0,0,0.25）；
}
.瓦片{
网格行：跨度2；
格构柱：跨度2；
}
.tile.selected:：before{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
背景色：rgba（255、255、255、.2）；
}

A.
B
C
D
E
F
G
H
我
我最终选择了Michael在下面提到的Javascript（jQuery）路线。如果有人偶然发现这个问题，我的代码笔链接将被更新。