Display Grid und Template-Spalten und -Zeilen
Aktivieren Sie CSS Grid und definieren Sie Spalten- und Zeilen-Tracks mit grid-template-columns und grid-template-rows.
Display Grid und Template-Spalten und -Zeilen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
CSS Grid aktivieren
CSS Grid wird aktiviert, indem für einen Container display: grid festgelegt wird. Seine direkten untergeordneten Elemente werden automatisch zu Grid-Elementen, die in Zellen platziert werden.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns definiert die Anzahl und Größe der Spalten. Jeder Wert erstellt einen Spalten-Track.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows definiert explizite Zeilen-Tracks. Elemente außerhalb der definierten Zeilen erzeugen implizite Zeilen.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Spalten- und Zeilen-Tracks
Jeder Wert in grid-template-columns oder grid-template-rows erstellt einen Track. Für Tracks kann jede Größeneinheit verwendet werden:
- Fest:
200px,10rem - Flexibel:
1fr - Inhaltsbasiert:
auto,min-content,max-content
Die fr-Einheit
fr (Bruch-Einheit) verteilt den verfügbaren Platz, nachdem feste Größen abgezogen wurden. 1fr 2fr erzeugt Spalten im Verhältnis 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>auto in Tracks
auto in einem Track erhält eine Größe, die zum Inhalt passt. Als Spalte nimmt er die von seiner breitesten Zelle benötigte Mindestbreite; als Zeile passt er sich an die höchste Zelle an.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Beispiel für ein Seitenlayout
Ein häufig verwendetes Seitenlayout mit drei Zeilen für Kopfzeile, Hauptinhalt und Fußzeile:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Kurzschreibweise für grid-template
grid-template kombiniert Zeilen und Spalten:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Grid in DevTools untersuchen
Chrome- und Firefox-DevTools können Grid-Track-Linien einblenden. Klicken Sie im Elements-Bereich auf das Grid-Symbol, um Spalten, Zeilen, Abstände und benannte Bereiche zu visualisieren.
Auswahl zwischen Grid und Flexbox
Verwenden Sie Grid, wenn Sie Zeilen und Spalten gleichzeitig steuern müssen. Verwenden Sie Flexbox für eindimensionale Layouts (eine Reihe von Elementen oder eine Spalte von Elementen). Viele Layouts verwenden beide.
Zeilennummern
Grid nummeriert seine Linien automatisch ab 1. Sie können auf diese Nummern verweisen, um Elemente manuell zu platzieren. Spaltenlinien reichen von 1 bis n+1, wobei n die Anzahl der Spalten ist.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Kurztest
Was erzeugt grid-template-columns: 200px 1fr 2fr?
Zusammenfassung
display: grid erstellt einen Grid-Container. grid-template-columns und grid-template-rows definieren Tracks. Die Einheit fr verteilt den verbleibenden Platz proportional. auto passt die Größe an den Inhalt an. Grid eignet sich ideal für die Steuerung zweidimensionaler Layouts.
Häufig gestellte Fragen
Ist die Lektion „Display Grid und Template-Spalten und -Zeilen“ kostenlos?
Ja — der vollständige Text von „Display Grid und Template-Spalten und -Zeilen“ 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 „Display Grid und Template-Spalten und -Zeilen“?
Aktivieren Sie CSS Grid und definieren Sie Spalten- und Zeilen-Tracks mit grid-template-columns und grid-template-rows. 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 1 von 4.
Wie lange dauert die Lektion „Display Grid und Template-Spalten und -Zeilen“?
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