Чистый CSS Masonry Layout без определенных столбцов

Question

Я написал макет, как показано выше. Я реализовал это с помощью простого использования элементов display: inline-block и article, которые имеют разную ширину и высоту, например:

width: 50%; /* this is variable*/
height: 160px;  /* this is also variable*/
padding: 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;

Теперь это уже работает довольно хорошо, но: Вы видите разрыв над полями 4 и 5? Могу ли я написать чистый макет CSS, чтобы эти поля заполняли пространство непосредственно под 1? Я видел некоторые решения flex-box, но они, казалось, работали с фиксированным набором столбцов, в идеале я просто хочу пропустить блоки 1-6 в макете, и они корректируются правильно. Это возможно с современным CSS? У меня нет ограничений браузера и я могу работать с любой современной функцией!

Answer 1

@ staypuftman указал в комментарии, чтобы использовать CSS-сетки, и я выполнил то, что хотел. Это мой код:

На контейнере:

display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 15px;
height: 100vh;

Что я делаю, я использую сетку, я создаю 8 столбцов, записывая 1fr 8 раз в grid-template-columns и 12 строк с 12 fr s в свойстве grid-template-rows. Также я установил grid-gap для промежутка между каждым элементом и высотой 100vh, чтобы моя сетка охватывала все видимое пространство.

Теперь в моих предметах я делаю это:

grid-column-end: span 2;
grid-row-end: span 2;

Где grid-column-end: span X указывает браузеру охватить элемент по 2 моим столбцам (из которых я создал 8) и то же самое в отношении строк с grid-row-end.

Это результат:

Answer 2

К сожалению, вы не можете сделать это с помощью flexbox, и я думаю, что компоновка сетки также не поможет. Чистый CSS макет кладки весьма ожидаем, но пока недоступен.

Я вижу два решения:

1.Используйте внешний пакет.Я бы предложил react-grid-layout, который использует JS для управления position: absolute и transform: translate значениями детей.Он поддерживает изменение размера и многие другие функции.В вашей ситуации это должно работать просто отлично.

2.Вы также можете использовать какой-нибудь крошечный JS (ручка не моя):