如果内容不存在，则折叠或合并网格单元格

Question

如果我有这样的网格：

有没有办法自动推动网格项3以占用网格项1的空间？

结构：

<div id="1"></div>
<div id="2">Content</div>
<div id="3">Content</div>

对于网格项目2，我这样做：

grid-row: 1 / span 2;

但我不能对网格项目3这样做，因为如果项目1中有内容，它会重叠。在我的情况下，我不知道是否有内容

Answer 1

它几乎是自动的。为div2设置第2列和第1-2行。让其他div自由占据剩下的空间：

＆＃13;

＆＃13;

tbb::parallel_do({1}, lambda);

＆＃13;

.container {
    display: grid;
    grid-template-columns: auto auto;
    border: solid 1px red;
    margin: 10px;
}

#div2 {
grid-row: 1 / span 2;
grid-column: 2;
background-color: yellow;
}

＆＃13;

＆＃13;

＆＃13;