如何根据同级的可见性填充空的CSS网格列

Question

我有以下网格-

父级-grid-template-columns: repeat(12, 1fr);

Child1-grid-column: 1 / span 3;

Child2-grid-column: 4 / span -1;

.box {
display:grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 5px;
height: 50px;
}
.child1 {
grid-column: 1 / span 3;
background: red;
}
.child2 {
grid-column: 4 / -1;
background: blue;
}

<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>

当Child1被隐藏时，child2是否可以从第1行开始？现在，当Child1是"；display:none"；，网格留下3个空列。我想把孩子2换到1号线。如果有人能指导我，那就太好了。提前感谢

Answer 1

您可以按照以下方式进行操作。诀窍是不定义列的数量，它们只会在需要时创建。

.box {
display:grid;
grid-auto-columns:  1fr; /* equal width columns */
grid-auto-flow:column; /* column flow */
grid-gap: 5px;
height: 50px;
margin: 5px;
border: 2px solid;
}
.child1 {
grid-column: span 3;
background: red;
}
.child2 {
grid-column: span 9;
background: blue;
}

below we have 12 columns
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
below we have 9 columns
<div class="box">
<div class="child1" style="display:none"></div>
<div class="child2"></div>
</div>