1

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

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

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

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

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

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

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

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

Есть идеи?

1 ответ 1

2

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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