Как сделать такой перенос элементов?

Question

[Даниил]

Имеется контейнер, в котором 6 блоков, расположенных на фиксированном расстоянии друг от друга на одной линии.

Как сделать так, чтобы при сжатии контейнера по ширине, как только блоки не вмещаются, СРАЗУ делать две строки по 3 элемента? (и так далее, т.е. 3 строки по 2 элемента, и 6 строк по 1)

С медиазапросами громоздко..

Пробовал делать через гриды и их auto-fill, но ничего не получилось.

Спасибо отозвавшимся!!

Comments

[Lord_Dantes]

display: flex; flex-wrap: wrap;

[Даниил]

Lord_Dantes,

СРАЗУ делать две строки по 3 элемента

Слово "сразу" значит не по одному элементу при сжатии переносить, а сразу выстроить 2 одинаковых row

[Ankhena]

"Сразу" может быть в нескольких случаях:
- media
- js
- обертки для каждый 3 элементов

[Lord_Dantes]

Даниил, делаете ограничение по ширине СРАЗУ в медиа-запросах

[Даниил]

Lord_Dantes, кстати, хорошая идея, думаю, это самое короткое и правильное решение. Спасибо!

Answer 1

[profesor08]

Только через @media запросы, так как auto-fill будет переносить по одному.

Answer 2

[Антон Шаманов]

через медиа либо js.

С медиазапросами громоздко.

ну так не морочь себе голову созданием универсального дизайна - сделай отдельно мобильную версию. да и весить будет в разы меньше