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

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

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

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    304
    Симпатии:
    168
    Хочу найти простую легковесную замену 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.
    Что я не досмотрел?
     
  2. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    304
    Симпатии:
    168
    Разобрался с проблемой времени исполнения..

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

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

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

    [​IMG]

    Получаем:
    [​IMG]
     
    Последнее редактирование: 15 авг 2019
  3. hydropericardium

    hydropericardium Создатель

    Регистр.:
    20 июн 2018
    Сообщения:
    17
    Симпатии:
    2
    Попробуйте заменить .ggrid { grid-gap: 10px; } на .ggrid { grid-gap: 20px; }
     
  4. typus

    typus

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