CSS：是否可以从流中删除 Grid 元素的子元素？ [复制]答案

【问题标题】：CSS: Is it possible to remove a child of a Grid element from flow? [duplicate]CSS：是否可以从流中删除 Grid 元素的子元素？ [复制]
【发布时间】：2021-08-25 09:00:15
【问题描述】：

我希望将 div“另一行”放在新行上我想避免绝对定位

Link to codepen

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="another-line">another line</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid > div {
  border: 1px solid red;
}

.another-line {} // ???

编辑：“另一行”之前的元素数量不固定

【问题讨论】：

.another-line { grid-row: 3; }

标签： css css-grid

【解决方案1】：

我想你想要这个

.another-line {
  grid-column-start:1;
}

演示：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid > div {
  border: 1px solid red;
}

.another-line {
  grid-column-start:1;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="another-line">another line</div>
</div>

【讨论】：

哦，是的，就是这样！当我试图设置 grid-row-start 属性时，它对我不起作用

【解决方案2】：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid > div {
  border: 1px solid red;
}

.box1 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 2;
}
.box2 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
}
.box3 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 2;
   grid-row-end: 3;
}
.box4 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 3;
   grid-row-end: 4;
}

<div class="grid">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">another line</div>
</div>

【讨论】：

嗯，这不起作用，因为“盒子”的数量不固定