@Marc

[Rolf B]

Hallo ,

in deinem Pen ist noch viel durcheinander.

• du musst <a> mit einem </a> beenden. Die fehlenden </a> zerreißen das ganze Layout.
• ein Browser zeigt die <li> in einem <ul> untereinander an. Du hast overflow:hidden und height:25px, deswegen verschwinden die <li>. Du verwendest für die <a> float:left um das zu ändern, aber das ist nicht die Lösung. Gib den li ein display:inline-block, dann erscheinen sie nebeneinander. Im <ul> brauchst Du dann kein height und kein overflow:hidden mehr.
• line-height: Das funktioniert nicht so wie Du denkst. Die 10% für das <a> haben keine Wirkung. line-height ist nicht ganz einfach zu verstehen; unser Wiki erklärt zu wenig dazu.

Deine Definition für das Grid musst Du noch verbessern.

• Du verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox
• Verschiebe grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; aus der @media-Regel in die allgemeine body-Regel. Sonst hast Du bei schmalen Bildschirmen keine Spalten mehr festgelegt

Was Du tun KANNST, aber nicht MUSST, ist dies: die Grid-Definition kann man einfacher machen. Du hast 8 Spalten angegeben, alle gleich breit. In den areas musst Du deswegen viel schreiben. Du hast aber eigentlich nur 3 Spalten: Links, Mitte, Rechts. Das kann man auch so bauen:

grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
  "header  header   header"
  "nav     nav     nav  "
  "linkBox main    infoBox"
  "footer  footer  footer  ";

Rolf