Gunnar Bittersmann: Neu: Holy-Grail-Layout

Beitrag lesen

@@Mitbeobachter

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

Wie adressiere ich jetzt in HTML z.B. die 2. footer-Zelle?

Es gibt keine 2. footer-Zelle.

„footer“ ist ein Bereich (area) (der sich über eine ganze Zeile erstreckt).

Damit das footer-Element in diesem Bereich plaziert wird:

footer {
  grid-area: footer;
}

Die Namensgleichheit muss nicht sein, wurde aber mit Bedacht gewählt.

Für die anderen Elemente header, nav, main, aside entsprechend.

😷 LLAP

--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon