将不等高的元素分布在两列中 [英] Distribute elements of unequal height in two columns

问题描述

这是）

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

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

解决方案

我不认为仅使用CSS就能解决此问题，您最好使用经过良好测试的JavaScript库，例如砌体使其生效。它将很好地处理您提到的响应式案例，因为所有内容都在

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

This is a development of this question with a crucial difference: elements to be distributed in two columns are of unequal heights. Please do not treat it as a duplicate.

WHAT I WANT TO ACHIEVE:

Given an unknown number of elements of roughly similar, but not identical height, the following should be achieved:

On desktop layout:

• elements need to be distributed in two columns in the following manner:

  1 2

  3 4

  5 6

  etc

• top element in the right column should be offset from the top border of the container at a greater distance than the top element of the left column, which should produce something like this:

• distances between the elements in the same column should be the same

On mobile layout:

• elements should remain in one column, positioned one below the other in their original order (1, 2, 3, 4, etc)

PROBLEM:

• If I try to solve this by assigning display: inline-block to the elements, the browser will try to put each pair on a separate line; and every difference in their height will result in unequal spacing between the elements of the same column. Example:

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>

• if I use CSS grid, the browser will create implicit rows for every new pair of elements, and the result will be visually similar to the previous attempt:

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>

• when I specify that I want all elements to go in the same row of CSS grid, they are positioned on top of one another (as discussed, without any solution, in this SO question)

This problem is, of course, trivially solved by placing the elements into two separate containers and then positioning these two containers relative to one another. The drawback with this approach is that in mobile layout, these containers will get stacked on top of one another, and the order of the elements will change (instead of 1 2 3 4 5 6 it will be, say, 1 3 5 2 4 6. I could, of course, draw two layouts on the same page and hide one of them depending on whether this is a desktop or a mobile screen, but I would rather not do so.

Is there a clean CSS-based solution to this problem?

解决方案

I don't think there's an elegant solution to this problem using only CSS. You're probably better off using a well-tested JavaScript library like Masonry to get this to work. It'll handle the responsive case you mentioned well, since the items will all be in a single container.

Here's a demo with a similar layout to the one you're describing: https://tympanus.net/Development/GridLoadingEffects/index.html

这篇关于将不等高的元素分布在两列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！