Не могу написать медиа запросы. Как лучше сделать?

Question

[Kerrik Солнце]

У меня есть несколько блоков, которые при уменьшении окна браузера перекидываются на новую строку.

Проблема в том, что...
При перекидывании блоков на новую строку, два из них становятся в ряд. Первому я задаю правый margin. Но за счет добавления правого отступа, блоки начинают дальше перекидываться. Если добавить еще один правый отступ (к другому блоку, который только что перекинулся), то происходит опять сброс на другую строку.
Вот результат того поведения, о котором я говорю:


Вот мой код
Помогите советом. Не могу сообразить как лучше сделать:)

Comments

[Ankhena]

Так и зачем вы задаете им эти марджины?
Просто меняйте ширину.
А еще во флексах уже работают gap, column-gap и row-gap, если не нужен какой-нибудь древний браузер.
Или переделайте на гриды, будет еще удобнее.

[Сергей delphinpro]

Ankhena, с гапами вы поспешили всё же https://caniuse.com/?search=flex%20gap
По мне, так пока лучше использовать классику — отрицательные компенсирующие марджины у контейнера и боковые паддинги у блоков.

[Ankhena]

Сергей delphinpro, ну немножко :) Уж очень я их хочу и поэтому осторожненько использую в некоторых не критичных проектах.
Тут я бы гридами делала.

[Сергей delphinpro]

Ankhena, да. на гридах тут и без медиа-запросов можно спокойно обойтись. и кода будет пара строчек.

[Kerrik Солнце]

Сергей delphinpro, не совсем понимаю как способ с отрицательными марджинами поможет мне. Блоки сколько занимали пространства на странице, столько и будут занимать (что приведет к тому, что описанное выше поведение останется). Хотелось бы решить вопрос, не переписывая все под грид

[Kerrik Солнце]

Сергей delphinpro, это будут те же отступы, заданные немного другим способом

[Сергей delphinpro]

Kerrik Солнце, ну бутстрап посмотрите. я же говорю — классика.
ну или вот пример
https://codepen.io/delphinpro/pen/ExgdXZj?editors=1100

[Kerrik Солнце]

Сергей delphinpro, да, все в самом деле получилось. Спасибо за совет. Единственное что, еще не совсем понимаю как именно происходит такое выравнивание (совместная работа padding'ов и margin'ов). Надо будет еще потренироваться)

Answer 1

[nuralimkk]

скиньте код