Как сделать этот блок адаптивным?

Question

Дмитрий @letehaha

Вникаю вo front-end

Как сделать этот блок адаптивным?

Как сделать подобный блок адаптивным?

Сверстать проблем нету. И через flexbox, и через float, и через position: absolute. А вот как адекватно адаптировать, что бы ничего не выпирало и все такое.

UPD: Видимо я не правильно объяснился, или черт его знает. Адаптивность не горизонтальная, а вертикальная. И решение я уже сам написал, так что вопрос ЗАКРЫТ :)

Также я хочу фильтровать это с помощью mixItUp.

Вопрос задан более трёх лет назад
284 просмотра

Комментировать

Подписаться 1 Оценить Комментировать

Answer 1 · 2016-09-17 18:53:32

Есть решение проще спомошью column-count.

.image-grid {
    column-count: 4;
    column-gap: 0;
}

.image-item {
   display: inline-block;
}

.image-item img{
  width: 100%;
}

@media screen and (max-width: 480px) {
    .image-grid {
        column-count: 1 !important;
    }
}

@media screen and (max-width: 960px) {
    .image-grid {
        column-count: 2;
    }
}

Как сделать этот блок адаптивным?

Войдите на сайт