Holy Gral-Layout

Bei diesem klassischen Holy Gral-Layout gibt es eine Kopfzeile, eine Fußzeile, eine linke und eine rechte Seitenleiste sowie einen Hauptinhalt. Es ähnelt dem vorherigen Layout, allerdings mit Seitenleisten.

Um das gesamte Raster mit einer einzigen Codezeile zu schreiben, verwenden Sie das Attribut grid-template. So können Sie Zeilen und Spalten gleichzeitig festlegen.

Das Attribut/Wert-Paar lautet: grid-template: auto 1fr auto / auto 1fr auto. Der Schrägstrich zwischen der ersten und der zweiten durch Leerzeichen getrennten Liste ist der Abstand zwischen Zeilen und Spalten.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

Wie beim letzten Beispiel, in dem die Größe der Kopf- und Fußzeile automatisch angepasst wurde, werden auch hier die Größe der linken und rechten Seitenleiste automatisch an die jeweilige Größe der untergeordneten Elemente angepasst. Dieses Mal ist es jedoch horizontal (Breite) statt vertikal (Höhe).

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}