Grid Layout [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
===== 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:

{{ :gf_informatik:web_sca:grid_layout.svg |}}


==== Aufträge ====

=== Auftrag I (Website mit Grid) ===

   * Informiere dich darüber (siehe [[#grid_einrichten|Theorie zu 'Grid einrichten']] und [[#links|Links]] unten), wie man ein Grid für seine Website erzeugt.
   * Erstelle eine neue Website mit einem Grid-Layout, welches folgende Eigenschaften hat:
     * Header und Footer über ganze Breite mit festgelegter Höhe (Header/Footer ganz oben/unten).
     * Dazwischen links: Platz für eine Sidebar
     * Platz rechts davon, zwischen Header und Footer: Mehrere Rasterbereiche mit unterschiedlicher Grösse für Hauptinhalt.
   * Arbeite in Chrome im [[gf_informatik:web:css_2022#entwicklungsmodus|Entwicklungsmodus]].
   * Die Website könnte etwa so aussehen:{{ :gf_informatik:web_sca:grid_layout_example_01.png?400 |}}

=== Auftrag II (Website mit responsive Grid) ===

   * Erweitere deine Website mit Raster von der vorherigen Aufgabe so, dass das Grid responsive wird und sich sinnvoll anpasst, wenn die Breite der Website einen gewissen Pixelwert unterschreitet.
   * Informationen dazu findest du [[#responsive_grid|hier]].
   * Macht man das Beispiel von der letzten Aufgabe schmaler, könnte es etwa so aussehen:{{ :gf_informatik:web_sca:grid_layout_example_01b.png?200 |}}


=== Auftrag III (Kombination der beiden Websiten) ===

   * Ziel ist, deine erste Website vom HTML/CSS-Teil mit einem responsive Grid auszustatten.
   * Erstelle dazu eine neue Website mit einem Grid-Layout, welches zu deiner ersten Website passt.
   * Kopiere dann die Inhalte von dieser hinein.


==== 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:
<code html>
<body>
    <my-container>
        <!-- Füge hier alle Elemente hinzu, die im Grid angezeigt werden sollen -->
    </my-container>
</body>
</code>

Die **Grundeinstellungen** im CSS für ein 4x3-Grid sehen wie folgt aus:
<code css>
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 */
}
</code>
Nun wollen wir dem Grid ein **Elemente** hinzufügen, wie: header, footer, sidebar oder content.
Machen wir ein Beispiel:
<code html>
<my-container>
    <my-header>Header</my-header>
    <my-content>Content</my-content>
</my-container>
</code>

<code css>
my-content {
    grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */
    grid-row: 2;
}
</code>
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:
<code css>
@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;
        /* ... */
    }
}
</code>
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:
<code css>
display: none;
</code>

Mehr Infos über **Medienabfragen (Media Queries)** wie diejenigen im Beispiel oben findest du zum Beispiel unter:
   * https://wiki.selfhtml.org/wiki/CSS/Media_Queries
   * https://www.w3schools.com/cssref/css3_pr_mediaquery.php

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:
<code css>
my-container {
    ...
    grid-template-areas: 
    "h h h"
    ...
    ;
    ...
}

my-header {
    grid-area: h;
}
</code>

==== Links ====

   * Sehr gutes Video-Tutorial (englisch): https://www.youtube.com/watch?v=Y9rHsdCxU8Q
   * https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
   * https://css-tricks.com/snippets/css/complete-guide-grid/