Как можно вывести так плитки?

Question

[genrich_pauls]

Интересует ,как собрать маленькие секции в один контейнер если они идут в разнобой?

Comments

[twobomb]

Ну тут дело верстки, а не пхп

[zorca]

Тегами ошиблись. Вам в HTML/CSS. PHP - серверный язык и не занимается версткой.

[genrich_pauls]

zorca, сервер выводить будет, логика нужна. а на сервере они находятся в разнобой

[Виталий Артемьев]

genrich_pauls, где код?

[genrich_pauls]

Виталий Артемьев, так и не знаю как foreach этот массив вывести,как запихнуть маленькие в один контейнер

[zorca]

genrich_pauls, ну это же чистая математика - смотрите внимательно на картинку и находите систему в этих преобразованиях. В данном случае у нас на первом блоке 3,4,5 и 6 итемы являются маленькими, осталось проверять их на индекс и загонять в этот специализированный квадрат.

Answer 1

[Vladislav]

foreach

Answer 2

[Stalker_RED]

Проще всего отдать на клиент без какой-то сортировки, а уже в браузере при помощи чего-то вроде masonry или isotope красиво отсортировать.

Или чего-нибудь из этого https://bashooka.com/coding/15-javascript-librarie...

А на php вы замучаетесь и все равно не получится учесть такие "мелочи" как размер экрана у юзера.

Answer 3

[garmon85]

Можно добавить классы отдельны классы большим и маленьким блокам
контейнер .gallery, большой блок .wide, маленький .tall

.gallery {
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    grid-auto-flow: dense;
}

.wide, .tall {
    background: #fff;
    box-shadow: 0 0.005em 0.01em 0 rgba(0,0,0,.1), 0 2px 5px 0 rgba(0,0,0,.1);
    position: relative;
}
.wide {
    overflow: hidden;
    grid-column: span 2;
    grid-row: span 2;
}
.tall {
    grid-row: span 1;}