将不等高的元素分布在两列中

Question

这是this question的发展，有一个关键的区别：要分布在两列中的元素的高度不相等。请不要将其视为重复项。

我要实现的目标：

鉴于未知数量的高度大致相似但高度不相同的元素，应实现以下条件：

在桌面布局上：

• 元素需要按以下方式分为两列：

  1 2

  3 4

  5 6

  等

右列中的

• top元素应与容器的顶部边框偏移，其距离应大于左列中的顶部元素，后者应产生如下内容：

• 同一列中元素之间的距离应该相同

在移动布局上：

• 元素应保留在一列中，并按其原始顺序（1、2、3、4等）放置在另一列之下

问题：

• 如果我尝试通过为元素分配display: inline-block来解决此问题，浏览器将尝试将每对放在单独的行上；并且它们高度上的每个差异都会导致同一列的元素之间的间距不相等。示例：

function fillGrid() {
  const container = document.querySelector('.container');
  const times = [...new Array(10)];
  times.forEach((garbage, index) => {
    const element = document.createElement('div');
    element.innerText = index + 1
    element.classList.add('grid-element');
    container.appendChild(element);
  });
}

fillGrid()

* {
  box-sizing: border-box;
}

.container {
  width: 60%;
  margin: auto;
  background: papayawhip;
  padding-bottom: 60px;
}

@media screen and (max-width: 600px) {
  .container {
    display: block;
  }
  
  .grid-element {
    width: 100%;
  }
  
}

.grid-element {
  display: inline-block;
  width: 48%;
  height: 100px;
  background: green;
  vertical-align: middle;
  margin-bottom: 20px;
}

.grid-element:nth-child(2) {
  margin-top: 60px;
}

.grid-element:nth-child(odd) {
  margin-right: 10px;
}
.grid-element:nth-child(even) {
  grid-column: 2/3;
}

/* Just to add some disorder to grid element heights */

.grid-element:nth-child(6) {
  height: 150px;
}

.grid-element:nth-child(7) {
  height: 200px;
}

<div class="container"></div>

• 如果我使用CSS网格，则浏览器将为每对新元素创建隐式行，其结果在视觉上类似于上一次尝试：

function fillGrid() {
  const container = document.querySelector('.container');
  const times = [...new Array(10)];
  times.forEach((garbage, index) => {
    const element = document.createElement('div');
    element.innerText = index + 1
    element.classList.add('grid-element');
    container.appendChild(element);
  });
}

fillGrid()

.container {
  display: grid;
  grid-template-column: 1fr 1fr;
  width: 60%;
  margin: auto;
  background: papayawhip;
  padding-bottom: 60px;
}

@media screen and (max-width: 600px) {
  .container {
    display: block;
  }
  
  .grid-element {
    width: 100%;
  }
  
  .grid-element:nth-child(2) {
    margin-top: 0;
  }
  
}

.grid-element {
  width: 90%;
  height: 100px;
  background: green;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: bold;
}

.grid-element:nth-child(2) {
  margin-top: 60px;
}

.grid-element:nth-child(odd) {
  grid-column: 1/2;
}
.grid-element:nth-child(even) {
  grid-column: 2/3;
}

/* Just to add some disorder to grid element heights */

.grid-element:nth-child(3) {
  height: 150px;
}

.grid-element:nth-child(6) {
  height: 150px;
}

.grid-element:nth-child(7) {
  height: 150px;
}

<div class="container"></div>

• 当我指定我希望所有元素都位于CSS网格的同一行中时，它们会彼此放置（如this SO question中所述，没有任何解决方案）

当然可以通过将元素放入两个单独的容器中，然后将这两个容器相对放置来简单地解决此问题。这种方法的缺点在于，在移动布局中，这些容器将堆叠在一起，并且元素的顺序将发生变化（例如，1 2 3 4 5 6会变成1 3 5 2 4 6。当然，我可以在同一页面上绘制两个布局，并根据是桌面还是移动屏幕来隐藏其中的一个，但是我宁愿不这样做。

是否存在基于CSS的干净解决方案？

Answer 1

我不认为仅使用CSS可以很好地解决此问题。您最好使用经过测试的Masonry之类的JavaScript库，以使其正常工作。它将处理您很好提到的响应式案例，因为所有项目都将放在一个容器中。

这里是一个演示，其布局与您描述的演示类似：https://tympanus.net/Development/GridLoadingEffects/index.html