Gap und Grid-Platzierung
Fügen Sie mit gap Abstände zwischen Grid-Zellen ein und platzieren Sie Elemente mit grid-column und grid-row.
Gap und Grid-Platzierung ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
gap in CSS Grid
Die Eigenschaft gap legt den Abstand zwischen Grid-Zeilen und -Spalten fest. Sie ersetzt die ältere Eigenschaft grid-gap und funktioniert auch in Flexbox.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap und column-gap
Legen Sie Zeilen- und Spaltenabstände unabhängig voneinander fest:
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Grid-Liniennummern
CSS Grid nummeriert seine Linien ab 1. Ein Grid mit drei Spalten hat die Spaltenlinien 1, 2, 3 und 4. Negative Nummern zählen vom Ende aus: -1 ist die letzte Linie, -2 die vorletzte.
grid-column und grid-row
Platzieren Sie Elemente manuell anhand von Liniennummern mit grid-column und grid-row:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>Das Schlüsselwort span
Verwenden Sie span, um anzugeben, wie viele Tracks ein Element abdecken soll, statt absolute Liniennummern zu verwenden:
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Negative Liniennummern
Negative Indizes zählen vom Ende aus. 1 / -1 umfasst unabhängig von der Spaltenanzahl immer die gesamte Gridbreite:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>Kurzschreibweise für grid-area
grid-area legt alle vier Werte für die Grid-Positionierung in einer Eigenschaft fest: row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Automatische Platzierung
Nicht explizit platzierte Elemente werden anhand des Algorithmus grid-auto-flow in der nächsten verfügbaren Zelle platziert. Der Browser füllt die Zellen standardmäßig von links nach rechts und von oben nach unten.
justify-items und align-items in Grid
In einem Grid-Container richtet justify-items den Zellinhalt horizontal aus; align-items richtet ihn vertikal aus. Beide haben standardmäßig den Wert stretch.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self und align-self
Einzelne Grid-Elemente können die Ausrichtung des Containers mit justify-self und align-self überschreiben:
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Überlappende Grid-Elemente
Mehrere Elemente können dieselbe Grid-Zelle belegen. Verwenden Sie z-index, um zu steuern, welches Element oben angezeigt wird. So lassen sich geschichtete Designs wie Bild und darüberliegender Text erstellen.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Kurztest
Ein Element hat grid-column: 2 / span 3. Welche Spalten belegt es in einem Grid mit fünf Spalten?
Zusammenfassung
gap fügt Abstände zwischen Grid-Zellen ein. Elemente werden mit Liniennummern über grid-column und grid-row platziert. Das Schlüsselwort span gibt an, wie viele Tracks abgedeckt werden sollen. Verwenden Sie 1 / -1, um immer alle Spalten zu überspannen. Grid-Elemente können sich mithilfe von z-index überlappen.
Häufig gestellte Fragen
Ist die Lektion „Gap und Grid-Platzierung“ kostenlos?
Ja — der vollständige Text von „Gap und Grid-Platzierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Gap und Grid-Platzierung“?
Fügen Sie mit gap Abstände zwischen Grid-Zellen ein und platzieren Sie Elemente mit grid-column und grid-row. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Gap und Grid-Platzierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Display Grid und Template-Spalten und -Zeilen
- Die fr-Einheit und Repeat
- Gap und Grid-Platzierung
- Grid-Template-Areas