HTML + CSS: Layout mit CSS Grid

Kurz: CSS Grid teilt einen Container in Zeilen und Spalten ein und platziert Elemente in dieses Raster. Es ist das mächtigste Layoutsystem von CSS.

Teil des Kurses HTML + CSS

Kapitel 20 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

CSS Grid teilt einen Container in Zeilen und Spalten ein und platziert Elemente in dieses Raster. Es ist das mächtigste Layoutsystem von CSS.

<style>
  .raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .raster > div { background: #8b5cf6; color: white; padding: 20px; text-align: center; border-radius: 6px; }
</style>
<div class="raster"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Spalten und Zeilen definieren

Eigenschaft	Beispiel	Bedeutung
grid-template-columns	200px 1fr 2fr	Breiten der Spalten
grid-template-rows	auto 1fr auto	Höhen der Zeilen
gap	12px, 12px 24px	Abstände zwischen Zellen
grid-auto-rows	minmax(80px, auto)	Höhe automatisch erzeugter Zeilen

Die Einheit fr (fraction) teilt freien Platz in Anteile: 1fr 2fr ergibt ein Drittel und zwei Drittel.

<style>
  .g { display: grid; gap: 6px; margin-bottom: 10px; }
  .g > div { background: #0ea5e9; color: white; padding: 10px; }
  .a { grid-template-columns: 100px 1fr; }              /* fest + flexibel */
  .b { grid-template-columns: 1fr 2fr 1fr; }            /* Anteile */
  .c { grid-template-columns: repeat(4, 1fr); }         /* viermal */
  .d { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }  /* so viele wie passen! */
</style>
<div class="g a"><div>100px</div><div>1fr</div></div>
<div class="g b"><div>1fr</div><div>2fr</div><div>1fr</div></div>
<div class="g c"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="g d"><div>auto-fit</div><div>minmax</div><div>passt</div><div>sich</div><div>an</div></div>

repeat(auto-fit, minmax(110px, 1fr)) ist eines der nützlichsten CSS-Muster überhaupt: ein responsives Raster ohne Media Queries. Es legt so viele Spalten an, wie mit mindestens 110 px passen, und verteilt den Rest.

Elemente platzieren

Mit Linien (die Linien zwischen den Spalten sind 1, 2, 3, …):

<style>
  .g { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 50px); gap: 6px; }
  .g > div { background: #f43f5e; color: white; display: grid; place-items: center; }
  .breit { grid-column: 1 / 3; background: #0ea5e9 !important; }     /* von Linie 1 bis 3 */
  .hoch  { grid-row: 2 / 4; grid-column: 4; background: #16a34a !important; }
  .span  { grid-column: span 2; background: #f59e0b !important; }
</style>
<div class="g"><div class="breit">1 / 3</div><div>B</div><div>C</div><div>D</div><div>E</div><div class="span">span 2</div><div class="hoch">hoch</div><div>F</div></div>

• grid-column: 2 / 4 Spalte von Linie 2 bis 4
• grid-column: span 2 zwei Spalten breit
• grid-column: 1 / -1 über die ganze Breite

Seitenlayout mit Bereichsnamen

Mit grid-template-areas zeichnest du das Layout in Textform:

<style>
  .seite {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "kopf  kopf"
      "menue inhalt"
      "fuss  fuss";
    gap: 6px;
    min-height: 220px;
  }
  .seite > * { padding: 10px; color: white; }
  header { grid-area: kopf; background: #1e293b; }
  nav { grid-area: menue; background: #475569; }
  main { grid-area: inhalt; background: #0f766e; }
  footer { grid-area: fuss; background: #1e293b; }
</style>
<div class="seite"><header>Kopf</header><nav>Menü</nav><main>Inhalt</main><footer>Fuß</footer></div>

Auf dem Handy änderst du in einer Media Query nur die Definition des Rasters, nicht das HTML:

@media (max-width: 600px) {
  .seite {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "menue" "inhalt" "fuss";
  }
}

Ausrichten

Eigenschaft	Ebene	Wirkung
justify-items, align-items	Container	Inhalt in jeder Zelle (horizontal / vertikal)
justify-content, align-content	Container	Raster im Container verteilen
justify-self, align-self	Kind	einzelnes Element
place-items: center	Container	Kurzform: in allen Zellen zentriert

<style>
  .g { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 70px; gap: 6px; }
  .g > div { background: #818cf8; color: white; padding: 4px 8px; }
  .zentriert { place-items: center; }
  .zentriert > div { }
</style>
<div class="g zentriert"><div>zentriert</div><div>in jeder</div><div>Zelle</div></div>

Dichte Raster und Galerien

<style>
  .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); grid-auto-rows: 70px; gap: 6px; grid-auto-flow: dense; }
  .galerie div { background: #14b8a6; border-radius: 6px; }
  .galerie .gross { grid-column: span 2; grid-row: span 2; background: #0f766e; }
  .galerie .breit { grid-column: span 2; background: #5eead4; }
</style>
<div class="galerie">
  <div class="gross"></div><div></div><div></div><div class="breit"></div><div></div><div></div><div></div><div class="breit"></div><div></div>
</div>

auto-fill legt leere Spalten an, auto-fit zieht sie zusammen. dense füllt Lücken.

Subgrid

Mit grid-template-columns: subgrid übernehmen verschachtelte Raster die Linien des Elternrasters, damit zum Beispiel Titel, Text und Button in jeder Karte exakt auf einer Linie liegen (in allen modernen Browsern verfügbar).

Grid oder Flexbox?

	Flexbox	Grid
Dimension	eine (Reihe oder Spalte)	zwei (Zeilen und Spalten)
Steuerung	vom Inhalt aus	vom Raster aus
Gut für	Menüs, Buttonreihen, Zentrieren	Seitenaufbau, Galerien, Formulare

Beides gemeinsam einsetzen: Grid für das große Layout, Flexbox für Inhalte in den Zellen.

Merke

• display: grid mit grid-template-columns und -rows
• fr teilt Platz in Anteile; repeat() und minmax() sparen Schreibarbeit
• repeat(auto-fit, minmax(200px, 1fr)) ergibt ein responsives Raster ohne Media Queries
• grid-column/grid-row und grid-template-areas platzieren Elemente
• place-items: center zentriert in allen Zellen

Übungsaufgabe

Baue ein Seitenlayout mit Kopf, Menü links, Inhalt und Fuß per grid-template-areas, das auf dem Handy einspaltig wird.

Quiz zur Selbstkontrolle

Was bedeutet 1fr 2fr?

• Zwei Spalten, die zweite doppelt so breit wie die erste (richtig)
• 1 und 2 Pixel
• Zwei gleich breite Spalten
• Zwei Zeilen

Was ergibt repeat(auto-fit, minmax(200px, 1fr))?

• So viele Spalten, wie mit mindestens 200 px passen (richtig)
• Genau eine Spalte
• Spalten mit 1 Pixel
• Einen Fehler

Wofür ist grid-template-areas?

• Das Layout mit Bereichsnamen als Text beschreiben (richtig)
• Flächen berechnen
• Hintergrundfarben setzen
• Bereiche löschen

Weiter im Kurs

Zurück: Layout mit Flexbox

Weiter: Responsive Webdesign

Alle Kapitel: HTML + CSS im Überblick