1. Startseite
2. CSS
3. Grid-Layout

Grid-Layout

Mit dem "Grid-Layout" ist es möglich, ein Raster zu erstellen, in dem es keine festen Größenangaben gibt.

Insgesamt bietet das "Grid-Layout" einen sehr großen Einsatzbereich, man könnte damit sogar gesamte Webseiten gestalten. Das "Grid-Layout" besteht aus Linien, die einzelne Zellen erzeugen. Man kann es sich vorstellen, wie das Papier aus dem Matheheft mit den Karos.

Grid-Layout erstellen

Als Erstes benötigen wir einen Bereich, in dem das Layout erstellt wird.

<div id="grid"></div>

Eingeleitet wird dieses Layout mit der Deklaration "display: grid;" im Elternelement.

#grid {
 display: grid;
 grid-template-rows: 200px 100px 150px;
 grid-template-columns: 25% 25% 25% 15% 10%;
}

Mit "grid-template-rows" werden Abstände für die Zeilen erstellt. Mit "grid-template-columns" werden die Größen der Spalten definiert. Auf der Webseite ist noch nichts zu erkennen, allerdings können wir in der Entwicklerumgebung bereits die Struktur vom "Grid-Layout" betrachten.

Wenn wir nun in der HTML-Datei ein paar Elemente innerhalb des Elternelements einfügen, dann ordnen sich diese der Reihe nach von oben links nach oben rechts und in der nächsten Zeile wieder von links nach rechts an, genauso wie auch ein Buch gelesen wird.

<div id="grid">
 <div>Kind01</div>
 <div>Kind02</div>
 <div>Kind03</div>
 <div>Kind04</div>
 <div>Kind05</div>
 <div>Kind06</div>
 <div>Kind07</div>
 <div>Kind08</div>
 <div>Kind09</div>
 <div>Kind10</div>
 <div>Kind11</div>
 <div>Kind12</div>
 <div>Kind13</div>
 <div>Kind14</div>
 <div>Kind15</div>
</div>

Elemente neu anordnen

Wenn wir eine Anordnung von oben nach unten und dann erst in die nächste Spalte wünschen, dann schreiben wir die zusätzliche Deklaration "grid-auto-flow: column;" in die CSS-Datei.

#grid {
 display: grid;
 grid-template-rows: 200px 100px 150px;
 grid-template-columns: 25% 25% 25% 15% 10%;
 grid-auto-flow: column;
}

Zusätzlich können wir auch einzelne Elemente gezielt positionieren. Mit den Eigenschaften "grid-row-start" & "grid-row-end" bzw, "grid-column-start" & "grid-column-end" positionieren wir die Elemente. Aber nicht über die Boxen bzw. Felder, sondern über die gedachten Linien im Raster. Zur Demonstration löschen wir die <div> Elemente im Grid Container und erstellen darin die Elemente: <main>, <article>, <aside> und <footer>

<div id="grid">
 <main></main>
 <article></article>
 <aside></aside>
 <footer></footer>
</div>

In der CSS definieren wir eine Hintergrundfarbe für die Elemente und geben die Rasterlinien an, bei denen das Element startet und endet.

main {
 background-color: deepskyblue;
 grid-column-start: 1;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 2;
}

Das <main>-Element hat jetzt eine bläuliche Hintergrundfarbe. Der Bereich des Elements wurde in der Breite von Linie 1 bis Linie 4 und in der Höhe von Linie 1 bis Linie 2 festgelegt. Für das nächste Element verwenden wir die Kurzschreibweise, die wir in CSS auch nutzen können.

article {
 background: fuchsia;
 grid-column: 4/6;
 grid-row: 1/4;
}

Dann können wir die letzten beiden Elemente auch in der Kurzschreibweise definieren.

aside {
 background: darkseagreen;
 grid-column: 1/2;
 grid-row: 2/4;
}
footer {
 background: lime;
 grid-column: 2/4;
 grid-row: 2/4;
}

Grid-area

Über die Eigenschaft "grid-area" ist es auch möglich, einzelne Bereiche zu definieren.

#grid {
 display: grid;
 grid-template-rows: 200px 100px 150px;
 grid-template-columns: 25% 25% 25% 15% 10%;
 grid-template-areas:
 "b1 b1 b1 b2 b2"
 "b4 b4 b4 b2 b2"
 "b3 b3 b3 b3 b3"
}
main {
 grid-area: b1;
 background: deepskyblue;
}
article {
 grid-area: b2;
 background: fuchsia;
}
aside {
 grid-area: b3;
 background: darkseagreen;
}
footer {
 grid-area: b4;
 background: lime;
}

Flexbox oder Grid-Layout

Die Frage, ob Flexbox oder Grid-Layout verwendet werden soll, kann in etwa so definiert werden:

Grid-Layout verwendet man, um ein Layoutraster zu erstellen. Flexbox kann man verwenden, wenn bestehender Inhalt ein Layout erhalten soll. Also eine komplexe Rasterstruktur erstellen wir mit CSS-Grid und um ein einfaches Layout innerhalb eines Elementes zu erstellen, bietet sich Flexbox an.