0Pricing
CSS Academy · Lektion

Implizites Grid und Grid-Auto-Flow

Verstehen Sie, wie CSS Grid Elemente außerhalb expliziter Tracks mit impliziten Zeilen und Spalten verarbeitet.

Implizites Grid und Grid-Auto-Flow 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.

Explizites und implizites Raster

Das explizite Raster wird durch grid-template-columns und grid-template-rows definiert. Wenn Elemente über diese definierten Tracks hinausgehen, erstellt der Browser automatisch implizite Tracks.

grid-auto-rows

Legt die Größe implizit erstellter Zeilentracks fest. Ohne diese Eigenschaft werden implizite Zeilen so groß, dass ihr Inhalt hineinpasst (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows mit minmax

Legen Sie für implizite Zeilen eine Mindesthöhe fest, erlauben Sie aber, dass sie größer werden:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Legt die Größe impliziter Spaltentracks fest, wenn Elemente außerhalb des Bereichs der expliziten Spalten platziert werden:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Steuert, wie der Algorithmus zur automatischen Platzierung Elemente anordnet:

  • row (Standard) – Platzierung in Zeilen, bei Bedarf werden neue Zeilen hinzugefügt
  • column – Platzierung in Spalten, neue Spalten werden hinzugefügt
  • row dense – Lücken werden durch Zurückgehen im Platzierungsprozess möglichst vollständig gefüllt
  • column dense – dichtes Füllen in Spaltenrichtung

grid-auto-flow: dense

dense weist den Algorithmus an, zu versuchen, Lücken zu füllen, die von Elementen mit großer Spannweite hinterlassen wurden. Dadurch können Elemente außerhalb ihrer ursprünglichen Reihenfolge erscheinen.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Muster für den Spaltenfluss

Horizontal scrollbare Kartenleiste, deren Spalten bei Bedarf erweitert werden:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Dichtes Packen für Galerien

Eine Fotogalerie mit unterschiedlich großen Elementen, die Lücken füllt:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Implizites Raster und benannte Bereiche

Benannte Bereiche gelten nur für das explizite Raster. Elemente im impliziten Raster können nicht direkt über benannte Bereiche platziert werden – dafür sind Liniennummern oder eine Platzierung mit span erforderlich.

Das implizite Raster visualisieren

In den Chrome DevTools zeigt das Layout-Overlay sowohl explizite (durchgezogene) als auch implizite (gestrichelte) Rasterlinien. Das hilft Ihnen zu verstehen, wo automatisch platzierte Elemente angeordnet werden.

Die implizite Größe pro Element steuern

Elemente, die sich im impliziten Raster über mehrere Zeilen erstrecken, benötigen grid-auto-rows, damit ihre Größe korrekt bestimmt wird. Ohne diese Eigenschaft werden implizite Zeilen an den Inhalt angepasst, was zu ungleichmäßigen Layouts führen kann.

Schnelltest

Was bewirkt grid-auto-flow: row dense?

Zusammenfassung

Das implizite Raster erweitert das explizite Raster um automatisch erstellte Tracks. grid-auto-rows/columns steuert deren Größe; mit minmax() werden sie flexibel. grid-auto-flow legt die Platzierungsrichtung fest. Das Packen mit dense füllt Lücken möglichst vollständig – nützlich für masonryartige Layouts, kann aber die visuelle Reihenfolge verändern.

Häufig gestellte Fragen

Ist die Lektion „Implizites Grid und Grid-Auto-Flow“ kostenlos?

Ja — der vollständige Text von „Implizites Grid und Grid-Auto-Flow“ 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 „Implizites Grid und Grid-Auto-Flow“?

Verstehen Sie, wie CSS Grid Elemente außerhalb expliziter Tracks mit impliziten Zeilen und Spalten verarbeitet. 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 „Implizites Grid und Grid-Auto-Flow“?

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

  1. Benannte Linien und benannte Grid-Bereiche
  2. Auto-fit und Auto-fill mit minmax
  3. Implizites Grid und Grid-Auto-Flow
  4. Subgrid für ausgerichtete verschachtelte Inhalte
← Zurück zu CSS Academy