Gap Property - Modern Spacing in Flexbox

Welcome back! Just as in ancient Egypt there had to be proper spacing between hieroglyphs for readability, in modern CSS we need elegant spacing between elements. Meet the gap property - a modern and clean way to create spacing in Flexbox!

What is Gap?

Gap is a modern CSS property (widely supported since 2021) that creates spacing between flex elements without using margin!

Before gap - the old way

1/* Old way - complicated and problematic */
2.container {
3  display: flex;
4  margin: -10px;  /* Negative margin on container */
5}
6
7.item {
8  margin: 10px;  /* Margin on each element */
9}
10
11/* Problem: Margin is also on the outer edges! */

With gap - the new way

1/* New way - clean and simple */
2.container {
3  display: flex;
4  gap: 20px;  /* Spacing only BETWEEN elements */
5}
6
7.item {
8  /* No margin needed! */
9}
10
11/* Gap does NOT add spacing on the outer edges! */

Egyptian analogy: Gap is like the perfect spacing between hieroglyphs carved by a master - precise, even, and without unnecessary extra spaces.

Gap Syntax

1/* One dimension - same spacing horizontally and vertically */
2.container {
3  gap: 20px;
4}
5
6/* Two dimensions - row-gap and column-gap */
7.container {
8  gap: 20px 40px;  /* 20px vertically, 40px horizontally */
9}
10
11/* Or separately */
12.container {
13  row-gap: 20px;
14  column-gap: 40px;
15}

Gap in Different Flexbox Directions

1/* flex-direction: row (default) */
2.container-row {
3  display: flex;
4  flex-direction: row;
5  gap: 20px;  /* Spacing between elements horizontally */
6}
7
8/* flex-direction: column */
9.container-column {
10  display: flex;
11  flex-direction: column;
12  gap: 20px;  /* Spacing between elements vertically */
13}
14
15/* flex-wrap: wrap */
16.container-wrap {
17  display: flex;
18  flex-wrap: wrap;
19  gap: 20px;  /* Spacing between rows AND columns */
20}

Practical Examples

1. Card grid

1<div class="card-grid">
2  <div class="card">Card 1</div>
3  <div class="card">Card 2</div>
4  <div class="card">Card 3</div>
5  <div class="card">Card 4</div>
6  <div class="card">Card 5</div>
7  <div class="card">Card 6</div>
8</div>

1.card-grid {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;  /* Perfect spacing between cards */
5}
6
7.card {
8  flex: 0 0 calc(33.333% - 14px);  /* 3 columns */
9  /* calc accounts for gap: (40px total gap / 3 columns) ~ 14px */
10  padding: 20px;
11  background: #3498db;
12  color: white;
13  border-radius: 8px;
14}
15
16@media (max-width: 768px) {
17  .card {
18    flex: 0 0 calc(50% - 10px);  /* 2 columns on tablet */
19  }
20}
21
22@media (max-width: 480px) {
23  .card {
24    flex: 0 0 100%;  /* 1 column on mobile */
25  }
26}

Gap math for multi-column:

• 3 columns with gap 20px:

  calc(33.333% - 13.333px)

• 4 columns with gap 20px:

  calc(25% - 15px)

• Formula:

  calc(100% / n_columns - gap * (n_columns - 1) / n_columns)

2. Button group

1<div class="button-group">
2  <button class="btn">Cancel</button>
3  <button class="btn btn-primary">Save</button>
4  <button class="btn btn-danger">Delete</button>
5</div>

1.button-group {
2  display: flex;
3  gap: 10px;  /* Equal spacing between buttons */
4  justify-content: flex-end;
5}
6
7.btn {
8  padding: 10px 20px;
9  border: 1px solid #ddd;
10  background: white;
11  cursor: pointer;
12  border-radius: 4px;
13}
14
15.btn-primary {
16  background: #3498db;
17  color: white;
18}
19
20.btn-danger {
21  background: #e74c3c;
22  color: white;
23}

3. Form layout

1<form class="form">
2  <div class="form-row">
3    <input type="text" 
4## Practical Application
5
6Practice this concept in the editor below.
7    <input type="text" 
8## Practical Application
9
10Practice this concept in the editor below.
11  </div>
12  <input type="email" 
13## Practical Application
14
15Practice this concept in the editor below.
16  <textarea 
17## Practical Application
18
19Practice this concept in the editor below.
20  <button type="submit">Send</button>
21</form>

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 15px;  /* Spacing between form fields */
5  max-width: 500px;
6}
7
8.form-row {
9  display: flex;
10  gap: 15px;  /* Spacing between fields in a row */
11}
12
13.form input,
14.form textarea {
15  padding: 10px;
16  border: 1px solid #ddd;
17  border-radius: 4px;
18  font-family: inherit;
19}
20
21.form-row input {
22  flex: 1;  /* Equal width */
23}
24
25.form textarea {
26  min-height: 100px;
27  resize: vertical;
28}
29
30.form button {
31  padding: 12px;
32  background: #3498db;
33  color: white;
34  border: none;
35  border-radius: 4px;
36  cursor: pointer;
37  align-self: flex-start;
38}

4. Navigation bar

1<nav class="navbar">
2  <div class="nav-brand">Logo</div>
3  <ul class="nav-menu">
4    <li><a href="#">Home</a></li>
5    <li><a href="#">About</a></li>
6    <li><a href="#">Services</a></li>
7    <li><a href="#">Contact</a></li>
8  </ul>
9  <div class="nav-actions">
10    <button>Login</button>
11    <button class="btn-primary">Sign Up</button>
12  </div>
13</nav>

1.navbar {
2  display: flex;
3  align-items: center;
4  padding: 15px 30px;
5  background: #2c3e50;
6  gap: 30px;  /* Spacing between main sections */
7}
8
9.nav-brand {
10  font-size: 1.5em;
11  font-weight: bold;
12  color: goldenrod;
13}
14
15.nav-menu {
16  display: flex;
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  gap: 20px;  /* Spacing between links */
21  flex: 1;  /* Take up the middle */
22}
23
24.nav-menu a {
25  color: white;
26  text-decoration: none;
27  transition: color 0.3s;
28}
29
30.nav-menu a:hover {
31  color: goldenrod;
32}
33
34.nav-actions {
35  display: flex;
36  gap: 10px;  /* Spacing between buttons */
37}
38
39.nav-actions button {
40  padding: 8px 16px;
41  border: 1px solid white;
42  background: transparent;
43  color: white;
44  cursor: pointer;
45  border-radius: 4px;
46}
47
48.nav-actions .btn-primary {
49  background: goldenrod;
50  border-color: goldenrod;
51  color: #2c3e50;
52}

5. Dashboard layout

1<div class="dashboard">
2  <aside class="sidebar">
3    <div class="sidebar-item">Dashboard</div>
4    <div class="sidebar-item">Analytics</div>
5    <div class="sidebar-item">Settings</div>
6  </aside>
7  <main class="dashboard-main">
8    <header class="dashboard-header">Header</header>
9    <div class="dashboard-content">
10      <div class="widget">Widget 1</div>
11      <div class="widget">Widget 2</div>
12      <div class="widget">Widget 3</div>
13      <div class="widget">Widget 4</div>
14    </div>
15  </main>
16</div>

1.dashboard {
2  display: flex;
3  gap: 20px;  /* Spacing between sidebar and main */
4  height: 100vh;
5  padding: 20px;
6}
7
8.sidebar {
9  display: flex;
10  flex-direction: column;
11  gap: 10px;  /* Spacing between items */
12  flex: 0 0 250px;
13  background: #34495e;
14  padding: 20px;
15  border-radius: 8px;
16}
17
18.sidebar-item {
19  padding: 12px;
20  background: #2c3e50;
21  color: white;
22  border-radius: 4px;
23  cursor: pointer;
24}
25
26.dashboard-main {
27  flex: 1;
28  display: flex;
29  flex-direction: column;
30  gap: 20px;  /* Spacing between header and content */
31}
32
33.dashboard-header {
34  flex: 0 0 auto;
35  padding: 20px;
36  background: white;
37  border-radius: 8px;
38  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
39}
40
41.dashboard-content {
42  flex: 1;
43  display: flex;
44  flex-wrap: wrap;
45  gap: 20px;  /* Spacing between widgets */
46}
47
48.widget {
49  flex: 0 0 calc(50% - 10px);  /* 2 columns */
50  min-height: 200px;
51  padding: 20px;
52  background: white;
53  border-radius: 8px;
54  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
55}

Gap vs Margin - When to Use Which?

Use Gap:

• Spacing between elements in a flex/grid container
• Even spacing without complications
• When you don't need outer spacing
• Responsive layouts

Use Margin:

• Outer spacing (from the container)
• Asymmetric spacing
• When you need

  margin: auto

  for centering
• When you must support old browsers (pre-2021)

1/* Gap for internal spacing */
2.container {
3  display: flex;
4  gap: 20px;
5  padding: 20px;  /* Internal margin from the edge */
6}
7
8/* Margin for external spacing */
9.container {
10  margin: 40px auto;  /* Center the container */
11}
12
13/* Combination */
14.card {
15  /* Gap removes the need for margin between items */
16  /* but margin-top can be used for a specific purpose */
17  margin-top: auto;  /* Push to bottom in flex column */
18}

Responsive Gap

1.container {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 30px;
5}
6
7@media (max-width: 1024px) {
8  .container {
9    gap: 20px;  /* Smaller gap on tablet */
10  }
11}
12
13@media (max-width: 768px) {
14  .container {
15    gap: 15px;  /* Even smaller on mobile */
16  }
17}
18
19/* Or with CSS variables */
20:root {
21  --gap-large: 30px;
22  --gap-medium: 20px;
23  --gap-small: 15px;
24}
25
26.container {
27  gap: var(--gap-large);
28}
29
30@media (max-width: 768px) {
31  :root {
32    --gap-large: var(--gap-medium);
33  }
34}

Browser Support

Gap in Flexbox is supported since:

• Chrome 84+ (2020)
• Firefox 63+ (2018)
• Safari 14.1+ (2021)
• Edge 84+ (2020)

Fallback for old browsers:

1.container {
2  display: flex;
3  /* Fallback with margin */
4  margin: -10px;
5}
6
7.item {
8  margin: 10px;
9}
10
11/* Modern browsers override */
12@supports (gap: 20px) {
13  .container {
14    gap: 20px;
15    margin: 0;
16  }
17  
18  .item {
19    margin: 0;
20  }
21}

Summary

Gap:

• Modern and clean way to create spacing
• Works in Flexbox and Grid
• Only BETWEEN elements (not on the outside)
• Can have one dimension (gap: 20px) or two (gap: 20px 40px)
• Great for responsive layouts

Advantages:

• Simpler syntax than margin
• Doesn't add spacing on the outside
• Easier width calculations
• Cleaner code

When to use:

• Product cards in a grid
• Buttons in a group
• Forms
• Navigation bars
• Dashboards

Remember: Gap is like the perfect spacing between hieroglyphs in an Egyptian papyrus - precise, even, and without complications!