Попытка сделать аналог masonry на grid

Тема в разделе "Верстка", создана пользователем d0ublezer0, 15 авг 2019.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    311
    Симпатии:
    171
    Хочу найти простую легковесную замену masonry
    Можно использовать grid и немного JS.

    Вот нашлось неплохое решение https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

    Финальный проект из этого примера, который (у них) работает: https://codepen.io/andybarefoot/pen/QMeZda

    Но в моем случае: https://www.farmadental.ru/test.html

    Не пойму, почему не рассчитываются размеры при загрузке страницы, а считаются только при событии resize.
    Что я не досмотрел?

    Разобрался с проблемой времени исполнения..

    заменил
    Код:
    window.onload = resizeAllGridItems();
    на
    Код:
    window.addEventListener('load', resizeAllGridItems);
    На тестовой странице https://www.farmadental.ru/test.html

    всё заработало как надо, только вот на боевой странице https://www.farmadental.ru/doctors/balayan выстраиваться не хочет. между элементами не вычисляется расстояние по вертикали. Или вычисляется неправильно.

    Вместо (как в тестовом файле) :

    [​IMG]

    Получаем:
    [​IMG]
     
    Последнее редактирование модератором: 10 окт 2019
  2. typus

    typus

    Регистр.:
    25 июл 2007
    Сообщения:
    766
    Симпатии:
    202
    ну есть же и на чистом css masonry layout - codepen
    в выборке есть на гридах и не только.
     
    d0ublezer0 нравится это.
Статус темы:
Закрыта.