Anwendung

Hier wird der Beispiel-Code für das Erstellen eines Gridcontainers erklärt. Das Bild zeigt die Seite welche durch den Code erzeugt wird.

<div class="gridcontainer">: Dieses <div>-Element definiert den Container für das Rasterlayout.
<header>Header</header>: Dieser Bereich definiert den Header-Bereich und enthält den Text "Header". Es nimmt eine Zeile ein, die über alle drei Spalten des Rasters (grid-column: 1 / span 3) reicht.
<nav>Navigation</nav>: Dieser Bereich definiert den Navigationsbereich und enthält den Text "Navigation". Es nimmt eine Zeile ein und erstreckt sich über die erste Spalte des Rasters (grid-column: 1 / span 1).
<main>Main</main>: Dieser Bereich definiert den Hauptbereich der Webseite und enthält den Text "Main". Es nimmt eine Zeile ein und erstreckt sich über die zweite Spalte des Rasters (grid-column: 2 / span 1).
<aside>Aside</aside>: Dieser Bereich definiert den Seitenbereich und enthält den Text "Aside". Es nimmt eine Zeile ein und erstreckt sich über die dritte Spalte des Rasters (grid-column: 3 / span 1).
<footer>Footer</footer>: Dieser Bereich definiert den Footer-Bereich und enthält den Text "Footer". Es nimmt eine Zeile ein, die über alle drei Spalten des Rasters (grid-column: 1 / span 3) reicht.

Die CSS-Stile, die im <style>-Abschnitt definiert sind, legen die Hintergrundfarben für jeden Bereich fest, um sie voneinander zu unterscheiden.

Die grid-template-columns- und grid-template-rows-Eigenschaften im CSS definieren die Anzahl und Breite der Spalten bzw. die Anzahl und Höhe der Zeilen im Raster. In diesem Fall wird das Raster in drei Spalten und drei Zeilen aufgeteilt.

Das Rasterlayout ermöglicht es, den Inhalt der Webseite in einem flexiblen Rastersystem anzuordnen, wobei jeder Bereich des Rasters verschiedene Zwecke erfüllen kann (Header, Navigation, Hauptinhalt, Seiteninhalt und Footer).

Gridcontainer

Add your comment

Antwort an:

Kopieren bestätigen