Как поправить сетку на css?

Question

[Millerish]

Добрый день!

Я делаю фильтр для сайта. Все работает, но в css не пойму как поправить отображение блоков, они наезжают друг на друга при разной высоте. Одинаковая высота не подходит. Пробовал марджен, разные дисплеи - не помогло.

Подскажите, как поправить сетку?

centurymedicaldental.nyad.nyc/our-doctor

Answer 1

[Дмитрий Еремин]

а почему бы не использовать какой-нибудь фреймворк, в котором сетка пилится на раз-два?
открываете getbootstrap.com/customize, снимаете все галки, кроме Grid System и качаете готовое решение

Ну а как органирзоавть сетку в бутстрапе - расскажет любой видео-урок на ютубе

Для будующих комментаторов: согласен, что есть и другие готовые решения по организации сетки. Может быть, даже удобнее и лучше. Просто бутстрап я знаю, а других - нет ))

Comments

[Антон Нагаец]

Там и так бутстрап. Только из-за разной высоты блоки ездят на раз-два.

[Дмитрий Еремин]

Антон Нагаец: я думал, это пример того, что хочет получить автор))

[Антон Нагаец]

EreminD: да это, как я понял, живой сайт.

Answer 2

[Антон Нагаец]

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

Answer 3

[Сергей delphinpro]

ul.el-grid {
  font-size: 0;
}

li.isotope-item {
    font-size: 1rem;
    float: none;
    display: inline-block;
    vertical-align: top;
}

Эти правила должны располагаться в css файле после определений сетки (чтобы float перекрыть).

Более современный вариант

ul.el-grid {
  display: flex;
  flex-wrap: wrap;
}

Тогда у вас и блоки одной высоты станут (в каждой строке). Но тут IE10+

Comments

[Millerish]

Вы гений! )

[Сергей delphinpro]

Millerish: Спасибо, я знаю )