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

Question

[Игорь Лавров]

Нравится как отрабатывают на этом сайте новости https://www.netdreams.co.uk/blog/

Подскажите где найти такой плагин... grid бутстрапа не подходит... так как тут 5 колонок...я так же хочу сделать 5 колонок в ряд) и наверное их пять потому что экран большой у меня. Жду помощи

Comments

[Robert Bl]

А в чём проблема?

[Игорь Лавров]

Robert Bl: да я похоже туплю... сижу на месте пол дня... Нужно чтобы 5 колонок были адаптивные, каждая 300 пикселей и если к ней подходит граница, нужно чтобы одна колонка уходила ниже и все остальные так же строились

[Игорь Лавров]

Robert Bl: там какой-то скрипт помогает работе...

[Robert Bl]

Игорь Лавров: сделайте flex

[Robert Bl]

Игорь Лавров: Вам нужно плавный перенос сделать?

[Игорь Лавров]

Robert Bl: да

[gleendo]

Игорь Лавров:

// Можно было бы просто посмотреть как реализовано на том сайте.
display: inline-block;

[Ankhena]

Игорь Лавров:
на флексах это делается все очень просто.
flex-wrap: wrap и justify-content: space-between для родителя.
(Это если ширина блоков фиксированная про 300 точек. Если нет, значит задаем в % и ставим минимальную в 300 точек. Дальше точки слома (математика 2 класс): 1500px, 1200px и т.д.)

Answer 1

[Вадим Заражевский]

Вы, в принципе, можете использовать и bootstrap и любую другую библиотеку, просто изменив общее количество колонок на нужное вам (например 15). В bootstrap вам нужна переменная $grid-columns

Answer 2

[monochromer]

На данном сайте за колонки новостей отвечает masonry

Answer 3

[Максим]

ну... для начала вестать процентами
в какойто определённый момент ... делаем медиа запрос о том что размеры из процентов переходят в пиксель и что неких блоков было скажем пять а станет четыре потом в тот момент когда текст становится или другие элементы не красивыми или не читабельно делаем опять медиа запрос в котором указываем размер который должен расположить элементы три штуки на строку и потом опять только уже два и в конце концов 1 на строку ... и всё

Сложность только в том что надо хорошо знать css3