.svg)
What is the gap property in CSS?
The gap property sets the space between child elements in a Flex or Grid container, without adding margin on the outer edges. It is the modern, clean way to manage gutters between items.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
How gap works
gap is a shorthand for row-gap and column-gap. With a single value, spacing is uniform. With two values, the first sets the vertical gap and the second the horizontal gap. Gap works natively with Flexbox and Grid, and never creates unwanted space at the start or end of the container.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
Conclusion
Gap is the elegant, modern way to handle spacing in Flex and Grid layouts. It simplifies the code, avoids stray margins and makes layouts more predictable.
Key takeaways
- Space between items in Flex and Grid
- Shorthand for row-gap and column-gap
- Replaces margin-based techniques
- No space at the start or end of the container
- Supported by every modern browser
Unlimited requests, fast results
Submit as many briefs as you like. Our plans let you manage a continuous flow of design requests, without limits or friction, and at an economical price.
