@Denis25

Как сделать сетку, адаптирующуюся под количество элементов?

На входе - несколько элементов. Нужно выстроить их на странице по сетке. Количество элементов известно заранее, вид сетки в зависимости от каждого количества элементов тоже определен:

bd2e0232bb3c47f4a680b2f8c98bf81c.png



70b59967e00f49e295e7d8c586124097.png



14ba1d4d61154c8eb8b0b4634f34b5a6.png



e8b81e7bb6614b318336e0d66f187cea.png




Возможно ли подобное реализовать? Если да, то, может, подскажете в какую сторону смотреть? Пока даже близко не понимаю с какой стороны подступиться к этой задаче.
  • Вопрос задан
  • 247 просмотров
Решения вопроса 1
Можно попробовать начать с экспериментов
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
Считать количество элементов с помощью js. В зависимости от результата, присваивать определенный класс родителю. CSS строить от класса родителя. Возможно, придется применять конструкции типа .element:nth-child(n).
Ответ написан
@RadmirZ
Делаем интернет-магазины на движке minicart.su
semantic-ui.com/collections/grid.html - вроде бы тут есть что-то похожее.
Ответ написан
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Все, кроме последней картинки делается элементарно с помощью flexbox. А вот для последней уже понадобится javascript. Собственно, тогда изначально лучше делать скриптом. Считаете общее количество элементов, в зависимости от него задаете классы по паттерну.
Ответ написан
Ваш ответ на вопрос

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

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