Gaps im CSS Grid

Wenn du ein Kartenraster oder ein Seitenlayout baust, brauchst du fast immer Abstände zwischen den Grid-Items. Dafür nutzt du gap – ohne an jedem Element extra margin setzen zu müssen.

Was ist gap?

gap legt den Abstand zwischen den Spalten und Zeilen eines Grids fest. Der Abstand entsteht nur zwischen den Items – nicht am äußeren Rand des Containers.

Ohne gap liegen die Karten direkt nebeneinander und untereinander:

1.card-grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4}

1<section class="card-grid">
2  <article class="card">Karte 1</article>
3  <article class="card">Karte 2</article>
4  <article class="card">Karte 3</article>
5  <article class="card">Karte 4</article>
6  <article class="card">Karte 5</article>
7  <article class="card">Karte 6</article>
8</section>

Mit gap: 16px; entsteht ein gleichmäßiger Abstand in beide Richtungen:

1.card-grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  gap: 16px;
5}

gap, row-gap, column-gap

Es gibt drei Eigenschaften für Abstände im Grid:

• gap – Kurzform für row-gap und column-gap
• row-gap – Abstand zwischen den Zeilen
• column-gap – Abstand zwischen den Spalten

• gap: 16px – gleicher Abstand horizontal und vertikal
• gap: 12px 24px – erster Wert = row-gap, zweiter Wert = column-gap
• row-gap und column-gap – Abstände einzeln steuern

1.card-grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  gap: 12px 24px;
5}

1.card-grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  row-gap: 12px;
5  column-gap: 24px;
6}

gap mit fr und Prozent

Bei Spalten mit fr berücksichtigt das Grid den Abstand automatisch. Der freie Platz wird nach dem Abzug der Gaps aufgeteilt.

Mit Prozentwerten kann es anders aussehen: Wenn drei Spalten je 33.33% breit sind und zusätzlich noch gap dazukommt, kann das Grid breiter werden als der Container.

Deshalb sind fr-Werte bei Grids mit gap oft die bessere Wahl.