Inhaltsverzeichnis

Grid Layout

Mithilfe des Grid Layout Modules kann man seiner Website ein Raster zugrundelegen, welches sich dynamisch anpasst, z.B. wenn man die Fenstergrösse des Browsers verändert oder die Website auf einem Smartphone anschaut. Einzelne Elemente der Website können dann den Zellen des Rasters zugeordnet werden:

Aufträge

Auftrag I (Website mit Grid)

Auftrag II (Website mit responsive Grid)

Auftrag III (Kombination der beiden Websiten)

Grid Einrichten

Erzeuge im Body des HTML-Seite ein neues Element und nennen es my-container. Dieses Element ist nicht Teil des HTML-Standards, aber wir dürfen beliebige Elemente erfinden, solange wir in deren Namen einen Bindestrich verwenden: 

<body>
    <my-container>
        <!-- Füge hier alle Elemente hinzu, die im Grid angezeigt werden sollen -->
    </my-container>
</body>

Die Grundeinstellungen im CSS für ein 4×3-Grid sehen wie folgt aus: 

body{
    margin: 0; /* damit kein Rand um Grid-Container */
}
 
my-container {
    display: grid;
    width: 100vw; /* 100% der verfügbaren Breite */
    height: 100vh; /* 100% der verfügbaren Höhe */
 
    grid-template-columns: 1fr 2fr 2fr; /* drei Spalten, wobei die 2. und 3. beide doppelt so breit sind wie erste */
    grid-template-rows: 60px 1fr 1fr 50px; /* vier Zeilen, erste und letzte haben fix angegebene Höhe, ... */
 
    gap: 10px; /* gap um Elemente des Grids */
}

Nun wollen wir dem Grid ein Elemente hinzufügen, wie: header, footer, sidebar oder content. Machen wir ein Beispiel: 

<my-container>
    <my-header>Header</my-header>
    <my-content>Content</my-content>
</my-container>
my-content {
    grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */
    grid-row: 2;
}

Mit grid-column und grid-row kann angegeben werden, über welchen Bereich des Rasters sich das Element erstreckt. Alternativ kann man auch grid-column-start, grid-column-end, ... verwenden.

Responsive Grid

Typischerweise möchte man, dass sich das Grid anpasst, wenn man eine Website auf einem kleineren Bildschirm wie einem Smartphone anschaut. Mit der folgenden Medienabfrage kann man angeben, wie sich die Darstellung ändern soll, wenn die Breite des Viewports unter einen gewissen Wert fällt: 

@media only screen and (max-width: 500px) {
    /* überschreibe hier für alle Selektoren, für die sich etwas ändern soll, die entsprechenden Werte, wie z.B. */
    my-container {
        grid-template-columns: 1fr;
        /* ... */
    }
}

Falls ein Element in einer gewissen Situation gar nicht mehr angezeigt werden soll, z.B. die Sidebar in der Mobile-View, passe einfach seine visibiliy an: 

display: none;

Mehr Infos über Medienabfragen (Media Queries) wie diejenigen im Beispiel oben findest du zum Beispiel unter:

Die Website responsive zu machen ist ein wenig mühsam, wenn man die Ranges der einzelnen Grid Elemente wie oben beschrieben mit grid-column und grid-row festlegt, da man dann die CSS-Einträge sämtlicher Grid Elemente anpassen muss. Alternativ kann man mit grid-template-areas arbeiten, dann muss man nur Veränderungen im Eintrag für my-container {...} vornehmen. Dazu muss man den Elementen einen Namen zuweisen und kann dann über die Namen die Zuteilung der Zellen vornehmen: 

my-container {
    ...
    grid-template-areas: 
    "h h h"
    ...
    ;
    ...
}
 
my-header {
    grid-area: h;
}