1

Мне нужно сверстать блоки в три колонки типа введите сюда описание изображения

Блоки могут растягиваться в ширину, но у каждого фиксированная высота. Проблема начинается тогда, когда я пытаюсь сделать их адаптивными. Чтоб добиться хоть примерного поведения я использовал flex, bootstrap, сам пытался, но в итоге остановился на bootstrap. Если слишком широкий экран, то должно быть три колонки, если обычный, то две, и если маленький, то одна. С первым и последним вариантом всё предельно просто. А вот что делать со вторым?

Приведу пример того, что имею:

В три колонки: введите сюда описание изображения

В одну: введите сюда описание изображения

А вот в две не выходит, остаётся пустое место у красного блока. введите сюда описание изображения

Я понимаю, что это из-за высоты первой строки и поделать что-то с этим не получится, но возможно есть в данной ситуации какой-то иной подход к написанию этого.

У меня есть идея оставить всё как есть, только после того, как колонок стало две, третью колонку скрывать и с помощью js распределять её элементы по имеющимся двум. Только мне почему-то кажется, что это огромный костыль и должен быть вариант, который я упустил.

Есть идеи?

1 ответ 1

2

Для решения подобных вопросов подойдет https://github.com/desandro/masonry и ему подобные.

2
  • 1
    В опубликованном сообщении не содержится решения проблемы. Пожалуйста, постарайтесь писать более развёрнутые ответы.
    – mymedia
    Commented 28 июн. 2017 в 18:27
  • Хм, интересный вариант решения проблемы. А что на счёт производительности скажете. Я посмотрел много материалов, по этому способу, в общем то можно его заставить работать и с сеткой bootstrap. Но будет ли это лучше, чем если я сам вычислю и раскидаю элементы по колонкам?
    – Tima
    Commented 28 июн. 2017 в 19:30

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.