Как сверстать сложную сетку блоков с помощью Bootstrap?

Question

[Alexander]

Здравствуйте, помогите решить задачу, буду очень благодарен.

Нужно сверстать сетку блоков для изображений, и сделать это нужно в одном col, то есть если их будет больше, тогда будут проблемы с реализацией фильтрации на JS, в данном примере используются 3 col.

Comments

[Пашенька]

это нужно в одном col, то есть если их будет больше, тогда будут проблемы с реализацией фильтрации на JS

Нет. Проблемы будут только, когда вы не высекаете, что делаете. Колонки используют, чтобы изображения в них были responsive.

Как сверстать сложную сетку

И где же здесь, что-то сложное? И вопрос ваш не сложный. И неужели во всём интырнете нет уже свёрстанного и с мэзонри? Это же самое классическое применение.

[Максим]

это не сложная вёрстка ...
а бутстрап пора выкинуть в помойку

[Alexander]

Максим Ленский, почему?

[Максим]

Александр Лисовский, бутстрап устарел уже - весь его код работает нативно ...а реализуется то что на вашем скрине даже без js средствами css

[Alexander]

like-a-boss, у меня был варик сделать это на чистых Grig-(ах), но на счет кроссбраузерности в старых EI хз

[Alexander]

Максим Ленский, но он же очень ускоряет верстку, не нужно создавать контернер, брекпоинты и тд, или уже есть какой-то фрем по лучше?

[Максим]

Александр Лисовский, это моё личное мнение - bs уже не нужен ...flexbox и grid и так работает ...это примерная аналогия jquery и ванильный js

[Сергей delphinpro]

Максим Ленский, bs — это не только сетка, если что.
аккордионы, тултипы, модалки...

Можно по отдельности насобирать, но зачем, если есть все в одном?

[Сергей delphinpro]

Александр Лисовский,

у меня был варик сделать это на чистых Grig-(ах), но на счет кроссбраузерности в старых EI хз

Progressive Enhancement

Сначала пилим тупо 6 блоков, сетка 3х2, произвольной высоты, по контенту.
Не по макету? Да. Но только в древних браузерах, и главное контент доступен, сильно ничего не ломается.
При наличии поддержки grid пишем стили для грид раскладки. Тут уже все будет красиво и по макету.

[Максим]

Сергей delphinpro, я не навязываю свою точку зрения, модалка и прочая полезность включая слайдеры и тд пишется за 2-3 часа вместе с адаптивностью ...но в купе до выхода в продукцию ..занимает много времени конечно ..но всё же я люблю ручками и именно из за этого я отказался от jquery в пользу ванилина и так же от всяких библиотек типа bs

[Пашенька]

Максим Ленский, увожаю.

[Сергей delphinpro]

модалка и прочая полезность включая слайдеры и тд пишется за 2-3 часа вместе с адаптивностью

А подключается за 2 минуты.

но всё же я люблю ручками и именно из за этого я отказался от jquery в пользу ванилина и так же от всяких библиотек типа bs

Это пройдет со временем.

[Пашенька]

Александр Лисовский, да отправьте вы уже IE на покой. В современном мире его уже, можно сказать, не существует, а тем, что существует, стоит пренебречь. И это я говорю, как дикий перфекционист.

[Alexander]

Сергей delphinpro, Спасибо большое!

[Максим]

Сергей delphinpro, долго не проходит - примерно с пять лет

[Сергей delphinpro]

Максим Ленский, немного осталось =)

[Максим]

Сергей delphinpro, да,да ...но не буду перепрыгивать на bs или прочую чешую ..мне так проще ..мне ни кто не приказывает и не может приказать ...

Answer 1

[Alex]

https://github.com/desandro/masonry