Grid and padding?

Question

css

Fragment from the 320px layout. Screen
Example in Codepen compress to 320px
Margins on the edges - 12px
Margins between cards / columns in the amount of 3px, while in the mobile version the cards do not have margins along the edges of the screen
Cards can have a different number and besides the cards there are other blocks that do not have margins along the edges.
An example with two columns - when there are two columns, then in principle everything is OK, but what if there are 3 of them, for example. Yes, you can write different options in nth-of-type, but it looks like a crutch.
An example with 3 columns - if you reset the extreme ones, then the width of their content is greater than the content of the central one, which is logical. But this breaks the design. The question arises, how to keep the width and at the same time zero out the edges. You add another 1.5px to the negative margins in row, but in this case a horizontal scroll appears.
How to "zero" the edges in such cases?
Toli I am stupid, toli the designer does not understand how to build a grid.

Answer 1

Make left and right indents using calc (100% - something)