Grid Areas

Bisher hast du Items mit Linien oder mit span platziert. Für Seitenlayouts gibt es noch eine besonders lesbare Möglichkeit:grid-template-areas.

Damit kannst du Bereiche im Layout benennen, zum Beispiel header, sidebar, main und footer.

Grid Areas machen ein Layout lesbarer, weil die Struktur im CSS fast wie eine kleine Skizze aussieht.

Statt ein Element mit Linien zu platzieren, kannst du dem Grid sagen: Dieser Bereich heißt header, dieser Bereich heißt sidebar, dieser Bereich heißt main.

1.layout {
2  display: grid;
3  grid-template-areas:
4    "header header"
5    "sidebar main"
6    "footer footer";
7}

Nachdem die Areas im Container definiert wurden, weist du die einzelnen Elemente diesen Areas zu. Der Name hinter grid-area muss exakt zu einem Namen aus grid-template-areas passen.

1.area-header {
2  grid-area: header;
3}
4
5.area-sidebar {
6  grid-area: sidebar;
7}
8
9.area-main {
10  grid-area: main;
11}
12
13.area-footer {
14  grid-area: footer;
15}

Responsive Umordnung mit Areas

Ein großer Vorteil von Grid Areas ist, dass du ein Layout auf kleineren Bildschirmen sehr lesbar umsortieren kannst.

Desktop:

1.layout {
2  display: grid;
3  grid-template-areas:
4    "header header"
5    "sidebar main"
6    "footer footer";
7}

Mobile:

Dafür änderst du in einer Media Query einfach die Areas:

1@media (max-width: 768px) {
2  .area-layout {
3    grid-template-columns: 1fr;
4    grid-template-areas:
5      "header"
6      "main"
7      "sidebar"
8      "footer";
9  }
10}