Neu: Holy-Grail-Layout

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

1. Beispiel ist das Holy-Grail-Layout

Das wäre ein gutes Beispiel, um nicht mit Spaltennummern zu hantieren, sondern zu zeigen, wie das mit benannten Bereichen geht:

body {
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

Ja, so hatte ich auch angefangen: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche

Ich habe es aus diesem Tutorial heraus auch verlinkt.

Mittlerweile bin ich dafür, das aber zu einem späteren Zeitpunkt zu erklären.

Im Forum gibt es immer wieder das Verständnisproblem, das Grid auch auf Kindeskinder anwenden zu wollen.

Eine Notation wie

body {
  grid-template-areas:
    "footer footer footer";
}

scheint dies noch zu unterstützen.

Ich bitte alle mal zu überlegen, wie man das anfangs so verwirrende, eigentlich aber genial einfache Grid erklären kann.

Herzliche Grüße

Matthias Scharwies