The gap property adds space between grid and flexbox items without affecting outer edges. Here's how to use it effectively.
Basic Syntax#
1/* Single value - both row and column gap */
2.container {
3 gap: 1rem;
4}
5
6/* Two values - row gap, column gap */
7.container {
8 gap: 1rem 2rem;
9}
10
11/* Individual properties */
12.container {
13 row-gap: 1rem;
14 column-gap: 2rem;
15}
16
17/* Percentage values */
18.container {
19 gap: 5%;
20}With Flexbox#
1/* Horizontal flex with gap */
2.flex-row {
3 display: flex;
4 gap: 1rem;
5}
6
7/* Vertical flex with gap */
8.flex-column {
9 display: flex;
10 flex-direction: column;
11 gap: 0.5rem;
12}
13
14/* Wrapping flex with gap */
15.flex-wrap {
16 display: flex;
17 flex-wrap: wrap;
18 gap: 1rem;
19}
20
21/* Different row and column gaps */
22.flex-mixed {
23 display: flex;
24 flex-wrap: wrap;
25 row-gap: 2rem;
26 column-gap: 1rem;
27}With Grid#
1/* Basic grid with gap */
2.grid {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 gap: 1rem;
6}
7
8/* Different row and column gaps */
9.grid-mixed {
10 display: grid;
11 grid-template-columns: repeat(4, 1fr);
12 row-gap: 2rem;
13 column-gap: 1rem;
14}
15
16/* Auto-fill grid with gap */
17.grid-auto {
18 display: grid;
19 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
20 gap: 1.5rem;
21}Card Layouts#
1/* Card grid */
2.card-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
5 gap: 1.5rem;
6 padding: 1.5rem;
7}
8
9.card {
10 background: white;
11 border-radius: 8px;
12 padding: 1.5rem;
13 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
14}
15
16/* Horizontal card list */
17.card-list {
18 display: flex;
19 gap: 1rem;
20 overflow-x: auto;
21 padding: 1rem;
22}
23
24.card-list .card {
25 flex: 0 0 280px;
26}Navigation#
1/* Horizontal nav */
2.nav {
3 display: flex;
4 gap: 2rem;
5 list-style: none;
6 padding: 0;
7 margin: 0;
8}
9
10/* Nav with separator effect */
11.nav-separated {
12 display: flex;
13 gap: 0;
14}
15
16.nav-separated li:not(:last-child)::after {
17 content: '|';
18 margin-left: 1rem;
19 margin-right: 1rem;
20 color: #ccc;
21}
22
23/* Vertical nav */
24.sidebar-nav {
25 display: flex;
26 flex-direction: column;
27 gap: 0.5rem;
28}Button Groups#
1/* Horizontal button group */
2.button-group {
3 display: flex;
4 gap: 0.5rem;
5}
6
7/* Stacked buttons on mobile */
8.button-stack {
9 display: flex;
10 flex-direction: column;
11 gap: 0.75rem;
12}
13
14@media (min-width: 640px) {
15 .button-stack {
16 flex-direction: row;
17 }
18}
19
20/* Icon + text buttons */
21.icon-button {
22 display: flex;
23 align-items: center;
24 gap: 0.5rem;
25}Form Layouts#
1/* Vertical form */
2.form {
3 display: flex;
4 flex-direction: column;
5 gap: 1.5rem;
6}
7
8/* Form row */
9.form-row {
10 display: flex;
11 gap: 1rem;
12}
13
14.form-row > * {
15 flex: 1;
16}
17
18/* Form grid */
19.form-grid {
20 display: grid;
21 grid-template-columns: repeat(2, 1fr);
22 gap: 1rem;
23}
24
25.form-grid .full-width {
26 grid-column: 1 / -1;
27}
28
29/* Label + input group */
30.field {
31 display: flex;
32 flex-direction: column;
33 gap: 0.25rem;
34}Tag/Chip Lists#
1/* Tag cloud */
2.tags {
3 display: flex;
4 flex-wrap: wrap;
5 gap: 0.5rem;
6}
7
8.tag {
9 padding: 0.25rem 0.75rem;
10 background: #e5e7eb;
11 border-radius: 9999px;
12 font-size: 0.875rem;
13}
14
15/* Larger gap for bigger tags */
16.tags-large {
17 display: flex;
18 flex-wrap: wrap;
19 gap: 1rem;
20}Image Gallery#
1/* Masonry-style grid */
2.gallery {
3 display: grid;
4 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
5 gap: 1rem;
6}
7
8.gallery img {
9 width: 100%;
10 height: auto;
11 border-radius: 8px;
12}
13
14/* Equal height gallery */
15.gallery-equal {
16 display: grid;
17 grid-template-columns: repeat(3, 1fr);
18 gap: 0.5rem;
19}
20
21.gallery-equal img {
22 width: 100%;
23 aspect-ratio: 1 / 1;
24 object-fit: cover;
25}Responsive Gap#
1/* Responsive gap sizes */
2.responsive-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5 gap: 0.75rem;
6}
7
8@media (min-width: 640px) {
9 .responsive-grid {
10 gap: 1rem;
11 }
12}
13
14@media (min-width: 1024px) {
15 .responsive-grid {
16 gap: 1.5rem;
17 }
18}
19
20/* Using clamp for fluid gap */
21.fluid-gap {
22 display: grid;
23 grid-template-columns: repeat(3, 1fr);
24 gap: clamp(0.5rem, 2vw, 2rem);
25}Nested Layouts#
1/* Nested flex containers */
2.outer {
3 display: flex;
4 flex-direction: column;
5 gap: 2rem;
6}
7
8.inner {
9 display: flex;
10 gap: 1rem;
11}
12
13/* Nested grid */
14.grid-outer {
15 display: grid;
16 grid-template-columns: 200px 1fr;
17 gap: 2rem;
18}
19
20.grid-inner {
21 display: grid;
22 grid-template-columns: repeat(2, 1fr);
23 gap: 1rem;
24}vs Margin Approach#
1/* Old way - margins */
2.old-list {
3 display: flex;
4}
5
6.old-list > * {
7 margin-right: 1rem;
8}
9
10.old-list > *:last-child {
11 margin-right: 0;
12}
13
14/* New way - gap */
15.new-list {
16 display: flex;
17 gap: 1rem;
18}
19
20/* Gap is cleaner:
21 - No extra selectors
22 - No negative margins
23 - No last-child overrides
24 - Works with flex-wrap
25*/Footer Columns#
1/* Multi-column footer */
2.footer {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5 gap: 2rem 3rem;
6 padding: 3rem 2rem;
7}
8
9.footer-column {
10 display: flex;
11 flex-direction: column;
12 gap: 0.75rem;
13}
14
15.footer-column h4 {
16 margin-bottom: 0.5rem;
17}Centered Content#
1/* Centered column layout */
2.centered-content {
3 display: flex;
4 flex-direction: column;
5 align-items: center;
6 gap: 1.5rem;
7 text-align: center;
8 padding: 2rem;
9}
10
11/* Hero section */
12.hero {
13 display: flex;
14 flex-direction: column;
15 align-items: center;
16 justify-content: center;
17 gap: 2rem;
18 min-height: 80vh;
19}Best Practices#
General Usage:
✓ Prefer gap over margins
✓ Use with flex and grid
✓ Combine row-gap and column-gap
✓ Use responsive values
Sizing:
✓ Use rem for consistency
✓ Use clamp for fluid gaps
✓ Consider content density
✓ Match design system
Patterns:
✓ Cards and grids
✓ Navigation items
✓ Form elements
✓ Button groups
Avoid:
✗ Gap on non-flex/grid
✗ Negative gap values
✗ Mixing gap and margin
✗ Forgetting browser support
Conclusion#
The gap property simplifies spacing in flexbox and grid layouts by adding consistent space between items without affecting outer edges. It eliminates the need for negative margins and last-child selectors. Use single values for uniform spacing, two values for different row/column gaps, and combine with responsive breakpoints or clamp() for fluid layouts. Gap works with both flex and grid, making it the preferred way to handle spacing in modern CSS layouts.