gap: spacing between elements, no external edging

Useful to know

gap defines the spacing between rows and columns in supported layouts, including grid and flex. With one value, both gaps are set; with two values, the first is for the rows and the second is for the columns. [1]

In grid with three columns and gap: 16px; there are two spaces between the columns. This does not automatically add 16 pixels between the end cards and the edge of the container. For such an internal edge, you can set padding on the container.

In flex, the direction is relevant to the way the gaps are placed between the elements and the rows. Try the specific configuration, especially when there is a flex-wrap. If the distances seem larger than gap, also check margin and allocation by justify-content: they can add space regardless of the specified gap. [1]