Как правильно верстать такой блок?full width + внутренние отступы, без отступов по краям блока?

Question

[godsplan]

https://codepen.io/poylar/pen/NWGNBep

Нужно чтобы между блоками был отступ, но краями они прижимались к краю экрана/обертки.

Я делаю всегда через nth-child и обнуляю левый и правый маргин допустим у каждого 3 элемента(Если в строке 3 элемента) и у каждого первого левый маргин, но мне кажется это как то слишком. Может есть проще вариант?

Answer 1

[Максим Морев]

Уберите у обёртки указание ширины (это блочный элемент, он и так растянется на всю доступную ширину) и добавьте отрицательный margin слева и справа, равный margin элементов. Вжух. Вполне нормальная практика.



Альтернатива - использовать гриды, либо исповедовать ваш способ, но не стоит писать руками, есть специализированные инструменты для этого.
Стили получаются избыточные (хотя, в целом, не сильно больше, чем руками написать), зато работает железобетонно и с точки зрения DX великолепно.