Gap property - nowoczesne odstępy w Flexbox

Witaj ponownie! Podobnie jak w starożytnym Egipcie między hieroglifami musiały być odpowiednie odstępy dla czytelności, tak w nowoczesnym CSS potrzebujemy eleganckich odstępów między elementami. Poznaj właściwość gap - nowoczesny i czysty sposób na tworzenie odstępów w Flexbox!

Czym jest Gap?

Gap to nowoczesna właściwość CSS (od 2021 roku szeroko wspierana), która tworzy odstępy między elementami flex bez używania margin!

Przed gap - stary sposób

1/* ❌ Stary sposób - skomplikowany i problematyczny */
2.container {
3  display: flex;
4  margin: -10px;  /* Negatywny margin na kontener */
5}
6
7.item {
8  margin: 10px;  /* Margin na każdy element */
9}
10
11/* Problem: Margin jest też na zewnętrznych krawędziach! */

###Z gap - nowy sposób

1/* ✅ Nowy sposób - czysty i prosty */
2.container {
3  display: flex;
4  gap: 20px;  /* Odstęp tylko MIĘDZY elementami */
5}
6
7.item {
8  /* Nie potrzeba marginu! */
9}
10
11/* Gap NIE dodaje odstępu na zewnętrznych krawędziach! */

Analogia egipska: Gap to jak idealne odstępy między hieroglifami wykute przez mistrza - precyzyjne, równomierne i bez zbędnych dodatkowych przestrzeni.

Składnia Gap

1/* Jeden wymiar - taki sam odstęp w poziomie i pionie */
2.container {
3  gap: 20px;
4}
5
6/* Dwa wymiary - row-gap i column-gap */
7.container {
8  gap: 20px 40px;  /* 20px w pionie, 40px w poziomie */
9}
10
11/* Lub osobno */
12.container {
13  row-gap: 20px;
14  column-gap: 40px;
15}

Gap w różnych kierunkach Flexbox

1/* flex-direction: row (default) */
2.container-row {
3  display: flex;
4  flex-direction: row;
5  gap: 20px;  /* Odstęp między elementami w poziomie */
6}
7
8/* flex-direction: column */
9.container-column {
10  display: flex;
11  flex-direction: column;
12  gap: 20px;  /* Odstęp między elementami w pionie */
13}
14
15/* flex-wrap: wrap */
16.container-wrap {
17  display: flex;
18  flex-wrap: wrap;
19  gap: 20px;  /* Odstęp między wierszami I kolumnami */
20}

Praktyczne przykłady

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;  /* Idealny odstęp między cards */
5}
6
7.card {
8  flex: 0 0 calc(33.333% - 14px);  /* 3 kolumny */
9  /* calc uwzględnia 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 kolumny na tablet */
19  }
20}
21
22@media (max-width: 480px) {
23  .card {
24    flex: 0 0 100%;  /* 1 kolumna na mobile */
25  }
26}

Matematyka gap dla multi-column:

• 3 kolumny z gap 20px:

  calc(33.333% - 13.333px)

• 4 kolumny z gap 20px:

  calc(25% - 15px)

• Formuła:

  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;  /* Równy odstęp między przyciskami */
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" placeholder="Imię">
4    <input type="text" placeholder="Nazwisko">
5  </div>
6  <input type="email" placeholder="Email">
7  <textarea placeholder="Wiadomość"></textarea>
8  <button type="submit">Send</button>
9</form>

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 15px;  /* Odstęp między polami formularza */
5  max-width: 500px;
6}
7
8.form-row {
9  display: flex;
10  gap: 15px;  /* Odstęp między polami w wierszu */
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;  /* Równa szerokość */
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;  /* Odstęp między głównymi sekcjami */
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;  /* Odstęp między linkami */
21  flex: 1;  /* Zajmij środek */
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;  /* Odstęp między przyciskami */
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;  /* Odstęp między sidebar i main */
4  height: 100vh;
5  padding: 20px;
6}
7
8.sidebar {
9  display: flex;
10  flex-direction: column;
11  gap: 10px;  /* Odstęp między 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;  /* Odstęp między header i 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;  /* Odstęp między widgets */
46}
47
48.widget {
49  flex: 0 0 calc(50% - 10px);  /* 2 kolumny */
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 - kiedy używać czego?

Używaj Gap:

✅ Odstępy między elementami w kontenerze flex/grid ✅ Równomierne odstępy bez komplikacji ✅ Gdy nie potrzebujesz odstępów zewnętrznych ✅ Responsive layouts

Używaj Margin:

✅ Odstępy zewnętrzne (od kontenera) ✅ Asymetryczne odstępy ✅ Gdy potrzebujesz

margin: auto

do centrowania ✅ Gdy musisz wspierać stare przeglądarki (pre-2021)

1/* Gap dla wewnętrznych odstępów */
2.container {
3  display: flex;
4  gap: 20px;
5  padding: 20px;  /* Margin wewnętrzny od krawędzi */
6}
7
8/* Margin dla zewnętrznych odstępów */
9.container {
10  margin: 40px auto;  /* Wyśrodkowanie kontenera */
11}
12
13/* Kombinacja */
14.card {
15  /* Gap usuwa potrzebę margin między items */
16  /* ale margin-top może być używany dla konkretnego celu */
17  margin-top: auto;  /* Przesuń na dół w flex column */
18}

Responsywne 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;  /* Mniejszy gap na tablecie */
10  }
11}
12
13@media (max-width: 768px) {
14  .container {
15    gap: 15px;  /* Jeszcze mniejszy na mobile */
16  }
17}
18
19/* Lub z 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}

Wsparcie przeglądarek

Gap w Flexbox jest wspierane od:

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

Fallback dla starych przeglądarek:

1.container {
2  display: flex;
3  /* Fallback z 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}

Podsumowanie

Gap:

• Nowoczesny i czysty sposób na odstępy
• Działa w Flexbox i Grid
• Tylko MIĘDZY elementami (nie na zewnątrz)
• Może mieć jeden wymiar (gap: 20px) lub dwa (gap: 20px 40px)
• Świetne do responsywnych layoutów

Zalety:

• ✅ Prostsza składnia niż margin
• ✅ Nie dodaje odstępów na zewnątrz
• ✅ Łatwiejsze obliczenia szerokości
• ✅ Czytelniejszy kod

Kiedy używać:

• Karty produktów w grid
• Przyciski w grupie
• Formularze
• Nawigacje
• Dashboardy

Pamiętaj: Gap to jak idealne odstępy między hieroglifami w egipskim papir usie - precyzyjne, równomierne i bez komplikacji!