Schnelleinstieg in das Grid-Layout

April 2023

Wie anfangen?

Erst mal mit Vorbereitungen für ein Beispiel.
Anstelle von nav, header, section, aside usw., wie es in einer Webseite üblich wäre, nehmen wir einfache farbige div-Boxen. Damit können wir uns besser auf das Grid-Design konzentrieren und der Blick wird nicht von zu vielen Details abgelenkt.
Die Boxen (div-Elemente) werden von einem weiteren Element umhüllt (Cover-Box).

HTML-Code: Boxen innerhalb einer Cover-Box

<div class="cover"> 
  <div class="box red">Box Rot</div>
  <div class="box green">Box Grün</div>
  <div class="box blue">Box Blau</div>
  <div class="box yellow">Box Gelb</div>
  <div class="box magenta">Box Pink</div>
  <div class="box brown">Box Braun</div>
</div>
Eine Box Grün ist noch lange nicht grün, nur weil sie so heißt. Wir färben die Boxen mithilfe von CSS.

CSS-Code: Boxen unterscheidbar gestalten

.red     { background-color: red;     }
.green   { background-color: green    }
.blue    { background-color: blue;    }
.yellow  { background-color: yellow;  }
.magenta { background-color: magenta; }
.brown   { background-color: brown;   }

 /* Eigenschaften für alle Boxen */
.box     { min-height: 2em ; font-size: 1em; padding: 0.5em }
Das Beispiel anschauen

Boxen einem Grid zuordnen

Stellen wir uns vor, dass wir die ersten drei Boxen nebeneinander setzen wollen und darunter die nächsten drei Boxen wie in einer zweiten Zeile. Das geht sehr einfach mithilfe der Grid-Areas. Die dafür nötigen CSS-Styles definieren wir für die Cover-Box.

CSS-Code: Grid-Layout definieren

.cover {
  display: grid;  /* Box wird zum Grid-Container */
  grid-template-areas:
    "Rot Gruen Blau"
    "Gelb Pink Braun"; 
}
Über die Eigenschaft display:grid; wird die Cover-Box zum Grid-Container erklärt. Die enthaltenen Elemente (hier unsere farbigen Boxen) sind automatisch Grid-Items und die Eigenschaft grid-template-areas definiert deren Anordnung.
Die Grid-Zeilen werden als in Double Qoutes gesetzte Zeichenketten notiert. Darin schreiben wir selbstgewählte Namen für die Grid-Areas ein, wobei deren Anzahl pro Zeile die Anzahl der Grid-Spalten definiert.
So einfach soll das gehen? Nicht ganz. Noch wissen die Boxen nicht, welchem Feld sie zugeordnet werden sollen. Daher geben wir jeder Box über die Eigenschaft grid-area einen Area-Namen. Das sind (wenig überraschend) dieselben Namen, die wir hinter grid-template-areas geschrieben haben.

CSS-Code: Boxen einen Area-Namen geben

.red     {  grid-area: Rot;  }
.green   {  grid-area: Gruen; }
.blue    {  grid-area: Blau;  }
.gelb    {  grid-area: Gelb;  }
.magenta {  grid-area: Pink;  }
.brown   {  grid-area: Braun; }
Man kann diese Eigenschaften natürlich in die bereits vorhandenen Boxen-Styles einschreiben. Es ist aber übersichtlicher und leichter wartbar, die Grid-Definitionen separat zu notieren.
Das Beispiel anschauen
Das Grid-Design ist ein recht junges Feature. Zu alte Smartphones bzw. Browserversionen unterstützen das Grid-Design nicht, siehe caniuse.com

Anordnung der Grid-Items verändern

Das Beste kommt aber jetzt. Wir ändern die Area-Struktur wie folgt:

CSS-Code: Veränderte Grid-Anordnung

  grid-template-areas:
     "Gruen Gruen Gruen"
     "Gelb Pink Blau";
Die grüne Box ist dreimal aufgelistet und die Reihenfolge der Boxen ist komplett verändert. Was man nicht übersehen darf: die rote und die braune Box sind nicht enthalten, sie sollen also nicht mehr zu sehen sein. Dann ist es wichtig, sie mit display:none; auszublenden.

CSS-Code: Nicht benötigte Grid-Items ausblenden

.red, .brown { display:none; }
Das Beispiel anschauen
Was ist passiert? Nicht Eingeweihte könnten denken, dass die grüne Box dreimal nebeneinander abgebildet wird. Nein, es gibt nur eine grüne Box, aber die erstreckt sich jetzt über drei Felder! Die anderen Boxen befinden sich genau da, wohin die neue Area-Struktur sie hin delegiert hat, egal in welcher Reihenfolge sie im HTML-Code notiert sein.
Und damit haben wir alle Freiheiten, Grid-Items innerhalb eines Grid-Containers beliebig anzuordnen und beliebig ausdehnen zu lassen, egal mit wie vielen Grid-Zeilen und Grid-Spalten.
Beachten Sie, dass der HTML-Code nur einmal notiert, und alles Styling inklusive Grid-Layout nur über CSS gesteuert wird.

Inline-Grid

Ein Grid kann alternativ auch ein Inline-Grid sein. Dazu muss lediglich die Display-Eigenschaft des Containers geändert werden.
  .cover {
    display: inline-grid;
    ...
  }
Das ganze Grid verhält sich jetzt wie ein Inline-Block und auch die Breiten der Grid-Items schrumpfen auf das minimal mögliche Maß, abhängig von deren Inhalt.
Das Beispiel anschauen.

Einiges geht nicht

Ein Grid-Item kann sich innerhalb eines Grid nur über einen rechteckigen Bereich ausdehnen. Der Versuch, Areas diagonal anzuordnen (im Beispiel die gelbe Box)

Diagonale Anordnung funktioniert nicht

 grid-template-areas:
    "Rot Gruen"
    "Gelb Pink" 
    "Braun Gelb";
oder eine L-ähnliche Anordnung zu definieren (im Beispiel die rote Box)

L-Struktur funktioniert nicht

 grid-template-areas:
    "Rot Gruen Pink"
    "Rot Rot Rot"     
    "Braun Gelb Blau";
zeigen nicht das gewünschte Ergebnis.
Es wird immer irgendein Grid aufgebaut, eventuell werden Boxen übereinander gelegt und/oder es werden zusätzlich Felder automatisch generiert. Das Gleiche passiert auch, wenn auf der Child-Ebene des Grid-Containers Elemente vorhanden sind, die in den Grid-Eigenschaften nicht definiert wurden.

Spaltenbreiten festlegen

Mit der Eigenschaft grid-template-columns, angesiedelt im Grid-Cointainer, kann man die Spaltenbreiten eines Grids festlegen. Es kann eine feste Breite sein, prozentual angepasst oder frei ausdehnbar, wie es die Viewportbreite hergibt. Wir schreiben die gewünschten Breiten in der Reihenfolge, wie die Spalten angeordnet sind.
.cover {
  display: grid; 
  grid-template-areas:
  grid-template-columns: 20pt 30% 1fr;
    "Rot Gruen Blau"
    "Gelb Pink Braun"; 
}
Dieses Beispiel ist sehr anschaulich, wenn man die Breite des Browserfensters verändert.
Das Beispiel anschauen

Zeilenhöhen festlegen

Die Eigenschaft grid-template-rows funktioniert ähnlich für die Einstellung der Zeilenhöhen. Auch hier können %,pt oder andere Maßeinheiten angegeben werden. Wir ergänzen unser Beispiel und wollen, dass die erste Zeile nur die notwendige Höhe annimmt und die zweite Zeile sich über den Rest der Viewporthöhe ausbreiten kann. Wir fügen hinzu: 
  grid-template-rows: min-content 1fr; /* Zeilenhöhen einstellen */
Nun könnte man annehmen, dass die Höhe der zweiten Zeile bis zum untersten Bildschirmrand reicht - aber das passiert nicht. Wir haben letztendlich definiert, dass die Höhe der zweiten Zeile der Viewporthöhe entsprechen darf, aber die Ausdehnung wird durch den Inhalt bestimmt.
Nun gibt es zwei Möglichkeiten:
  • Füllen wir eine Box in der zweiten Grid-Zeile mit, wird die dadurch bestimmte Ausdehnung freundlicherweise auch die benachbarten Boxen betreffen.
  • Oder: Wir verpassen dem ganzen Grid eine Mindesthöhe, z.B. die ganze Höhe des Viewports
Für Letzteres könnten wir dem Grid folgende Eigenschaft hinzufügen: 
  min-height: 100vh;
Jetzt haben wir Erfolg!
Das Beispiel anschauen
Jedoch die Gridzeile wird viel höher und es erscheint der Scrollbalken im Browserfenster. Das liegt daran, dass ein Teil der Viewporthöhe außerhalb des Grids durch die Überschrift belegt wird. Genau um dem Betrag ist die zweite Grid-Zeile höher.
Um dieses Beispiel sauber hinzubekommen, empfiehlt es sich, den ganzen Viewport in das Grid einzubeziehen, also auch allen Inhalt wie im Beispiel die Überschrift.
Den HTML-Code ändern wir dahingehend, dass wir die Überschrift in ein header-Element platzieren, das wir wiederum am Anfang des Grid-Container unterbringen.
<div class="cover">
  <header class="top">
  <h2>Grid-Spaltenbreiten</h2>
  </header>
  <div class="box red">Box Rot</div> 
  <div class="box green">Box Grün</div>
  <div class="box blue">Box Blau</div>
  <div class="box yellow">Box Gelb</div>
  <div class="box magenta">Box Pink</div>
  <div class="box brown">Box Braun</div>
</div>
Der CSS-Grid-Code ist entsprechend zu ändern, das geht einfach und es bleibt alles übersichtlich.
/* Grid-Layout definieren */
.cover {
  display: grid;                       /* Box wird zum Grid-Container */
  min-height: 100vh;                   /*  Viewporthöhe */
  grid-template-columns: 20pt 30% 1fr; /* Spaltenbreiten des Grids einstellen */
  grid-template-rows: min-content min-content 1fr; /* Zeilenhöhen einstellen */
  grid-template-areas:
    "Top Top Top"
    "Rot Gruen Blau"
    "Gelb Pink Braun"; 
}

/* Boxen einen Area-Namen geben */
.top     {  grid-area: Top;  }
...
Das ganze Beispiel anschauen

Fehlt noch was?

Aber ja, da fehlt noch jede Menge. Für einen Schnelleinstieg soll es jedoch reichen.
Wenn Sie weitere Erläuterungen zum Grid-Design recherchieren, werden Sie u.a. auf Einführungen stoßen, die die Grid-Area-Eigenschaften zunächst gar nicht verwenden. Man kann ein Grid auch mit viel feiner granulierten Eigenschaften definieren.
Dieser Schnelleinstieg soll ein wenig helfen, andere Beiträge über CSS-Grids leichter zu verstehen.