@Roweb
Верстальщик

Как адекватно сделать сетку?

5ecfbcbc156e9896972559.png
<div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

Камим образом лучше такое реализовать?
Желательно:
1. Блоки должны идти в потоке слева на право, без доп оберток
2. Высота должна зависить от контента
3. Без js

Предложите лучший вариант с максимально возможным соблюдением требований( может от каких-то требований придется отказаться). Спасибо
  • Вопрос задан
  • 126 просмотров
Решения вопроса 2
approximate_solution
@approximate_solution
JS Developer
https://codepen.io/jensimmons/pen/QWjqbJj - это больше похоже на Masonry) Загляните в codepen, там в адаптиве Multicolumn как раз похож на такую сетку.
https://css-live.ru/css/priklyucheniya-masonry-ras...
5ecfc00f036cf617659309.png
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
То что вы описали - это masonry. На CSS Grid можно сделать примерно так:



Это не единственный вариант, но решение зависит от точных задач. Но:

1. Блоки должны идти в потоке слева на право, без доп оберток
2. Высота должна зависить от контента
3. Без js


С такими условиями, может тогда всё таки лучше использовать masonry.js? Правда в этом случае JS будет присутствовать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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