删除css网格中的空白

Question

我有以下代码，其中我有一个页面的 4 个部分 - 一个画廊、一个电子商务部分、一些内容和一些号召性用语。

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 750px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

<div class="wrapper">
  <div>Gallery</div>
  <div>Ecommerce<br>Ecommerce<br>Ecommerce</div>
  <div>Content</div>
  <div>CTAs</div>
</div>

从移动优先的方法开始，我们希望页面与画廊正下方的电子商务部分一样流动，但在桌面上，我们希望有 2 个列，画廊和内容组合在一起，电子商务和第二列中的 ctas 组。

但是，如果我们使用上述代码执行此操作，如果电子商务部分比图库长，它将在内容上方创建空白，如果图库比电子商务部分长，则在 CTA 部分上方创建空白。

有什么方法可以让桌面上的内容直接位于画廊下方而没有空白（即我可以以某种方式将两个 div 分组，使它们成为一列）？

我认为可能是使用网格区域的东西（但以下内容使内容位于画廊顶部）：

@media (min-width: 750px) {
  .wrapper {
    display: grid;
    grid-template-areas: "column1 column2";
  }
  
  .column-1 {
    grid-area: column1;
  }
  
  .column-2 {
    grid-area: column2;
  }
}

<div class="wrapper">
  <div class="column-1">Gallery</div>
  <div class="column-2">Ecommerce<br>Ecommerce<br>Ecommerce</div>
  <div class="column-1">Content</div>
  <div class="column-2">CTAs</div>
</div>

如果有非 CSS 网格解决方案，我也会接受。但没有固定高度或绝对定位，因为内容是动态的，下面还有其他内容

Answer 1

我认为唯一的解决方案是使用额外的包装器并依赖display:contents

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  border:1px solid;
  margin:5px;
}
.wrapper > div {
  display:contents;
}
.wrapper > div:first-child > div:first-child {
  order:1;
}
.wrapper > div:first-child > div:last-child {
  order:3;
}
.wrapper > div:last-child > div:first-child {
  order:2;
}
.wrapper > div:last-child > div:last-child {
  order:4;
}

@media (min-width: 750px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .wrapper > div {
    display:block;
  }
}

<div class="wrapper">
  <div>
    <div>Gallery</div>
    <div>Content</div>
  </div>
  <div>
    <div>Ecommerce<br>Ecommerce<br>Ecommerce</div>
    <div>CTAs</div>
  </div>
</div>
<div class="wrapper">
  <div>
    <div>Gallery</div>
    <div>Content<br>Content<br>Content</div>
  </div>
  <div>
    <div>Ecommerce</div>
    <div>CTAs</div>
  </div>
</div>