How to layout such a block correctly? full width + internal padding, without padding along the edges of the block?

Question

css

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

It is necessary that there is an indent between the blocks, but they are pressed against the edge of the screen / wrapper.

I always do it through nth-child and reset the left and right margins for every 3 elements (If there are 3 elements in the line) and for every first left margin, but it seems to me that this is too much. Maybe there is an easier option?

Answer 1

Remove the width indication from the wrapper (this is a block element, it will stretch to the entire available width anyway) and add a negative margin on the left and right, equal to the margin of the elements. Wow. Quite normal practice.

The alternative is to use grids, or practice your way, but you shouldn't write by hand, there are specialized tools for this .
The styles are redundant (although, in general, not much more than writing by hand), but it works like iron-clad concrete and from the point of view of DX it's great.

Answer 2

use grid
https://codepen.io/sharomet/pen/gOarBeB