Holy grail Layout mit CSS Grid

erstellt am: 14.07.2023 | Kategorien: Webentwicklung | Schlagworte: css • Grid

Das Holy Grail Layout ist ein klassisches Webdesign-Layout, das aus fünf Hauptbereichen besteht: einem Header, einem Footer, einer Hauptinhaltsfläche und zwei Seitenleisten. Der Hauptinhalt ist in der Mitte, flankiert von den Seitenleisten, während Header und Footer sich über die gesamte Breite des Layouts erstrecken.

Mit modernem CSS, insbesondere mit Flexbox und CSS Grid, ist es relativ einfach, ein Holy Grail Layout zu erstellen. Hier ist ein Beispiel mit CSS Grid:

body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  grid-template-areas: 
    "header header header"
    "sidebar content aside"
    "footer footer footer";
}

header {
  grid-area: header;
}

main {
  grid-area: content;
}

aside {
  grid-area: aside;
}

nav {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

Im obigen Beispiel erstellen wir ein Grid-Layout auf dem Body-Element. Die grid-template-columns und grid-template-rows Eigenschaften definieren die Struktur des Grids. 1fr 3fr 1fr bedeutet, dass wir drei Spalten haben, wobei die mittlere Spalte dreimal so breit ist wie die anderen. auto 1fr auto bedeutet, dass wir drei Zeilen haben, wobei die mittlere Zeile den verfügbaren Platz ausfüllt, während die oberen und unteren Zeilen nur so groß wie ihr Inhalt sind.

Jetzt wird es cool:

grid-template-areas ermöglicht es uns, Namen zu den Bereichen unseres Grids zu geben, was es einfacher macht, ihnen Elemente zuzuweisen.

Danach weisen wir jedem Element seinen Bereich zu, indem wir den Namen verwenden, den wir in grid-template-areas definiert haben.

Dieses Layout ist responsiv, weil es die Größe des Viewports verwendet, um die Größe der Elemente zu bestimmen. Es könnte jedoch sinnvoll sein, bei kleineren Bildschirmgrößen zu einem vertikaleren Layout zu wechseln. Mit einer Media Query könnte das etwa so aussehen:

@media (max-width: 600px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr 1fr auto;
    grid-template-areas: 
      "header"
      "sidebar"
      "content"
      "aside"
      "footer";
  }
}

In diesem Fall wechseln wir zu einem einzigen Spaltenlayout, wenn der Viewport kleiner als 600px ist. Die grid-template-areas Definition ändert sich, so dass jedes Element seine eigene Zeile bekommt.

Als erster einen Kommentar schreiben.