Einstieg CSS Grid

CSS Befehle für das Grid

Mithilfe von CSS Grid kann man ein Grid (Raster) über die Webseite legen und Elemente in diesem Grid platzieren. Will man beispielsweise ein Grid über den kompletten body einer Webseite legen, so nutzt man den folgenden Befehl:

body {
    display: grid;
}

Das Grid muss jetzt konfiguriert werden, dafür gibt es die folgenden Befehle, welche die Zeilen und Spalten sowie den Abstand dazwischen definieren:

• grid-template-rows: [hline] 3rem [hline] auto [hline] 3rem [hline];
  Legt die Zeilen des Grids fest, dabei stehen in den eckigen Klammern die Abtrennungen die beliebig benannt werden können und dazwischen eine Höhenabgabe der entsprechenden Zeile. Es ist erkennbar, dass nicht alle Längenangaben absolut definiert werden müssen. Die mittlere Zeile nimmt durch die Angabe auto den restlichen Platz ein.
• grid-template-columns: [vline] 10rem [vline] auto [vline] 3rem [vline];
  Legt die Spalten des Grids fest, Konfiguration wie bei den Zeilen.
• gap: 0.3rem;
  Legt den Abstand zwischen Zeilen und Spalten fest. Alternativ kann auch column-gap und row-gap benutzt werden, um die Abstände für Zeilen und Spalten seperat zu definieren.

Somit ergibt sich:

body {
    display: grid;
    grid-template-rows: [hline] 3rem [hline] auto [hline] 3rem [hline];
    grid-template-columns: [vline] 10rem [vline] auto [vline] 3rem [vline];
    gap: 0.3rem;    
}

CSS Befehle um Grid Elemente anzuordnen

Mit diesen Befehlen ist der body zwar schon als Grid konfiguriert, jedoch sind die Elemente noch nicht an den gewünschen Orten der Webseite. Dies schauen wir uns an einem Beispiel an. Lade dafür entweder das Archiv dateien.zip den Dateien 1.html und 2.html mit den zugehörigen CSS Datien 1.css und 2.css herunter und öffne sie in einem Editor deiner Wahl und die HTML Dateien auch im Browser oder arbeite alternativ mit dem HTML Tool am Ende dieser Seite zur Bearbeitung der folgenden Aufgaben:

Aufgabe 1