CSS
Managing Gaps and Gutters with CSS `gap` Property
Efficiently add consistent spacing between Flexbox and Grid items using the modern `gap`, `row-gap`, and `column-gap` properties, simplifying layout.
/* Flexbox with Gap */
.flex-container-gap {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Applies both row-gap and column-gap */
padding: 20px;
background-color: #f5f5dc;
border: 1px dashed #b8860b;
}
.flex-item-gap {
background-color: #faebd7;
padding: 15px;
border: 1px solid #d2b48c;
min-width: 100px;
flex-grow: 1; /* Allow items to grow */
text-align: center;
}
/* Grid with Gap */
.grid-container-gap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px 30px; /* Shorthand: row-gap column-gap */
/* Can also use:
row-gap: 15px;
column-gap: 30px;
*/
padding: 20px;
background-color: #e0f2f7;
border: 1px dashed #2196f3;
}
.grid-item-gap {
background-color: #b3e5fc;
padding: 15px;
border: 1px solid #03a9f4;
text-align: center;
}
How it works: The CSS `gap` property (and its longhands `row-gap` and `column-gap`) provides a straightforward way to create consistent spacing between items in both Flexbox and Grid layouts. Instead of using `margin` on individual items (which can lead to complex negative margin hacks or unwanted spacing at container edges), `gap` applies spacing *only between* items. The `gap` property can accept a single value for both row and column gaps, or two values for `row-gap` and `column-gap` respectively. This significantly simplifies managing gutters and ensures clean, predictable spacing.