Millerish
@Millerish

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

Добрый день!

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

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

centurymedicaldental.nyad.nyc/our-doctor
  • Вопрос задан
  • 764 просмотра
Решения вопроса 3
EreminD
@EreminD
Кое-что умею
а почему бы не использовать какой-нибудь фреймворк, в котором сетка пилится на раз-два?
открываете getbootstrap.com/customize, снимаете все галки, кроме Grid System и качаете готовое решение

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

Для будующих комментаторов: согласен, что есть и другие готовые решения по организации сетки. Может быть, даже удобнее и лучше. Просто бутстрап я знаю, а других - нет ))
Ответ написан
gr1mm3r
@gr1mm3r
50% ответа в правильном вопросе. Остальное мануал.
самое простое это привести к единому виду по высоте да и в принципе все.
А наезжают они правильно. Почитайте про гриды и конкретно про float. В любом случае при разной высоте будет пляска. Либо переверстывайте сетку на flex там по проще с вертикальным позиционированием. Да и если честно разновысотные блоки в сетке бьют по глазам.
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега PHP
frontend developer
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+
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы