Grid-Layout
Das Grid-Layout ist eine Technik zur Anordnung von Elementen auf einer Website. Dabei werden die Elemente entlang eines gedachten Gitternetzes (engl. grid) ausgerichtet. Um das Grid-Layout umzusetzen, werden HTML und CSS verwendet.
Die Idee ist, ein HTML-Element als Grid-Container zu kennzeichnen und alle Grid-Elemente, die an diesem Gitter ausgerichtet werden sollen, dort hinein zu platzieren. Wo genau die Elemente platziert werden sollen, wird dann in CSS festgelegt.
Was in HTML zu tun ist
Im <body> der Webseite wird ein <div>-Element angelegt und diesem eine class zugewiesen. Dieses Element ist der Grind-Container und es bietet sich an, die class auch so oder so ähnlich zu nennen.
In diesem Grid-Container, also zwischen seinem öffnenden <div>- und seinem schließenden </div>-Tag werden dann die einzelnen Grid-Elemente platziert, ebenfalls in <div>-Tags eingeschlossen. Für jedes Element wird eine eigene class festgesetzt. Auch hier ist es sinnvoll, die Klassen so zu benennen, dass die Funktion als Grid-Element deutlich wird.
Was in CSS zu tun ist
Der Grid-Container
Für den Grid-Container muss festgelegt werden, dass in ihm alles am Gitter ausgerichtet wird. Dies bewirkt folgende Regel:
.grid-container {
display: grid;
}
Zusätzlich kann auf die Gestaltung des Gitters Einfluss genommen werden: Mit den Attributen column-gap und row-gap kann beispielsweise der Abstand zwischen zwei Spalten bzw. zwischen zwei Zeilen festgelegt werden. Mit grid-template-rows und grid-template-columns kann zusätzlich die Anzahl und Breite der Zwischenräume zwischen den Gitternetzlinien definiert werden. Wenn man diese Attribute nicht festlegt, werden die Zeilen und Spalten lückenlos aneinandergesetzt und die Anzahl, Höhe und Breite der Spalten und Zeilen automatisch aus den Definitionen der Grid-Elemente berechnet.
Insgesamt könnten die CSS-Regeln für den Grid-Container dann so aussehen:
.grid-container {
display: grid;
column-gap: 20px;
row-gap: 20px;
grid-template-rows: 200px 200px 200px; /* drei Zeilen, jede 200px hoch */
grid-template-columns: 15% 50% 20% 15%;/* vier Spalten, 15, 50, 20 und 15 Prozent der Container-Breite */
}
Die einzelnen Elemente
Für jedes Element muss festgelegt werden, an welcher Gitternetzlinie es beginnen und enden soll, sowohl waagerecht als auch senkrecht.
Dafür gibt es die Attribute grid-column-start, grid-column-end, grid-row-start und grid-row-end. Für den Artikel übers Schlittenfahren im oben abgebildeten Screenshot würden z.B. folgende Regeln gelten:
.schlittenfahren {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
Diese Regeln können auch als grid-column: VON / BIS; bzw. grid-row: VON / BIS; zusammengefasst werden, wobei die Start- und End-Gitterlinien mit einem Schrägstrich getrennt angegeben werden.
Beispiel
Der folgende Code erzeugt vier Boxen mit breiten schwarzen Rahmen in zwei Zeilen:
<html>
<head>
<style>
/* Regeln für die Rahmenlinien, damit man die Boxen sehen kann */
div {
border: 3px solid black;
padding: 20px;
}
.grid-container {
display: grid;
row-gap: 20px;
column-gap: 20px;
}
.grid-element-top-left {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.grid-element-top-right {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.grid-element-bottom-left {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.grid-element-bottom-right {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-element-top-left"></div>
<div class="grid-element-top-right"></div>
<div class="grid-element-bottom-left"></div>
<div class="grid-element-bottom-right"></div>
</div>
</body>
</html>
<div class="grid-container">
<div class="grid-element-top-left">
<div class="grid-element-top-right">
<div class="grid-element-bottom-left">
<div class="grid-element-bottom-right">
