Это развитие этого вопроса с принципиальным отличием: элементы, которые должны быть распределены в два столбца, имеют неодинаковую высоту.Пожалуйста, не рассматривайте его как дубликат.
ЧТО Я ХОЧУ ДОСТИГАТЬ:
Учитывая неизвестное количество элементов примерно одинаковой, но не одинаковой высотыдолжно быть достигнуто следующее:
В макете рабочего стола:
элементы должны быть распределены в два столбца следующим образом:
1 2
3 4
5 6
и т. Д.
верхний элемент в правом столбце должен быть смещенот верхней границы контейнера на большем расстоянии, чем верхний элемент левого столбца, который должен выглядеть примерно так:
- расстояния между элементами в одном столбце должны быть одинаковыми
На мобильном макете:
- элементы должны оставатьсяв одном столбце, расположенном один под другим в их первоначальном порядке (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, они располагаются друг над другом(как обсуждалось, без какого-либо решения, в этом вопросе SO )
Эта проблема, конечно, тривиально решается путем помещения элементов в два отдельных контейнера и последующего размещения этих двухконтейнеры относительно друг друга.Недостаток этого подхода заключается в том, что в мобильной компоновке эти контейнеры будут накладываться друг на друга, и порядок элементов будет меняться (вместо 1 2 3 4 5 6 это будет, скажем, 1 3 5 2 4 6.Конечно, нарисуйте два макета на одной странице и скройте один из них в зависимости от того, является ли это экраном рабочего стола или экрана мобильного устройства, но я бы предпочел не делать этого.
Есть ли чистое решение на основе CSS для этогопроблема?