Design AtlasA familiar headache with tag lists or button groups: you don't know the count or the widths in advance. Build it with inline-block plus margin-right and the vertical gap at a wrap point rarely matches the horizontal one, and the last item is left with an unwanted margin. display: flex; flex-wrap: wrap; gap: var(--space) removes the whole problem in one line, since gap applies identically in every direction, including across wraps.
Every Layout adds justify-content and align-items: center to define how the items "cluster." Whether they hug the left edge or gather in the center depends on the content — filter chips usually read better left-aligned, while a hero section's CTA button group often looks right centered.
The key is never fixing item width. Each item takes only as much space as its own content needs, and the container wraps them to a new line automatically once it runs out of room — no calculation of "how many fit per row" required.
When to use
Use it whenever several width-varying items — filter chips, tags, a row of social icons, a CTA button group — need to read as one loose cluster.