Помогите с css. Выровнять блоки один под другим без промежутков

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

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

    yaski

    Moderator
    Регистр.:
    21 фев 2010
    Сообщения:
    585
    Симпатии:
    393
    Помогите с css.
    Нужно разместить блоки товара на этом сайте как здесь.
    Имеются фотографии товаров разных размеров (квадратные, прямоугольные).
    Нужно чтобы фото товара было одно под другим и не было вертикальных промежутков, как на этом сайте
    Сейчас это выглядит так http://prntscr.com/nbw5vn
    А так должно выглядеть http://prntscr.com/nbw59w
     
  2. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    342
    Симпатии:
    113
  3. yaski

    yaski

    Moderator
    Регистр.:
    21 фев 2010
    Сообщения:
    585
    Симпатии:
    393
    А на чистом css возможно такое?
     
  4. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    342
    Симпатии:
    113
    можно, но реализации действительно динамической сетки не встречал. только статические
     
    yaski нравится это.
  5. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    231
    Симпатии:
    364
    вообще, masonry спорная штука, по крайней мере на сегоднящний момент, по многим параметрам и действительно качественной реализации нет даже в js версиях
    вариантов на чистом css достаточно много, это - grid masonry, flex masonry, fluid masonry, css columns masonry, в общем много
    гуглить так - pure css responsive masonry

    более менее приличные варианты, на первый взгляд
    https://codepen.io/ramenhog/pen/dvZVda
    https://codepen.io/AdamBlum/pen/fwrnE
    https://codepen.io/jh3y/pen/mPgyqw

    разумеется, js версии более настраиваемы и предсказуемы
     
    yaski нравится это.
  6. _kot

    _kot Постоялец

    Регистр.:
    16 ноя 2018
    Сообщения:
    81
    Симпатии:
    95
    поиграйся с foreach odd и even
    для odd одни свойства css для even другие.