css - 如何根据兄弟姐妹的可见性填充空的 CSS 网格列

Question

我有以下网格 -

家长 -grid-template-columns: repeat(12, 1fr);

孩子1 -grid-column: 1 / span 3;

孩子2 -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 个空列。我想将 child2 转移到 line1。如果有人可以指导我，那就太好了。提前致谢

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>