Das css-grid ist eine relativ neue Erfindung und löst einige Probleme im Bereich responsive design. Mit media-queries und einem zum Gerät passenden Grid, ist es möglich, die komplette Webseite in Reihen und Spalten einzuteilen, und dann Abschnitte unserer html-Datei in diese Bereiche einzufügen, wodurch die ursprüngliche Reihenfolge ggf. außer Kraft gesetzt wird. Ebenso ist die präzise Positionierung verschiedener Abschnitte nebeneinander möglich, weitaus kontrollierbarer und fehlerfreier als bisherige Methoden (float:left).
Ein Element wird mitdisplay:grid zu einem grid-container erklärt. Alle direkten Kindelemente werden dadurch zu grid-items. Im Elternelement muss jetzt eine grid Vorlage (template) definiert werden, dh. Der verfügbare Platz in diesem Element wird in Reihen und Spalten aufgeteilt und die Grenzen derer werden definiert. Dies geschieht folgendermaßen:
.container {
grid-template-columns: 40px 50px 1fr 50px 40px ;
grid-template-rows: 25% 100px 1fr ;
}
Mithilfe einer Leerzeichen-getrennten Liste an Größenangaben (absolut oder relativ) wird der Abstand zwischen den vertikalen und horizontalen Grenzen angegeben. Die Leerzeichen kann man sich dabei vorstellen als die Gitterlinien und die Größenangaben als der Abstand zwischen zwei Linien.
Wir haben auch Zugriff auf eine neue Größeneinheit, das fraction (fr). Ein fraction steht dabei für den verfügbaren Platz nachdem alle absoluten Größen gezeichnet wurden. Werden mehrere fr verwendet, zb: grid-template-columns: 1fr 1fr 2fr 3fr ; dann stehen die Zahlen für die relative Größe zueinander, also ein 2fr Bereich ist doppelt so groß wie ein 1fr Bereich.
Man kann allen Linien auch Namen geben. Tut man es nicht werden sie einfach durchnummeriert.
Standardmäßig fügen sich die direkten Kindelemente unseres grid-containers nun ihrer Reihenfolge in der html-Datei nach in die angelegte grid-Vorlage ein, wobei jedes Element eine Zelle unserer Vorlage einnimmt. Um die Reihenfolge oder die Größe einzelner Bereiche zu verändern gibt es zwei Möglichkeiten:
Wir geben die Startlinie und die Endlinie eines grid-Items an. Ein besipielhaftes Items soll die ersten drei Spalten der ersten Zeile einnehmen. Es gibt drei verschiedene Lösungen. Die ausführliche:
#box1{
grid-column-start: 1;
grid-column-end: 4;
}
Beachte: Es beginnt bei Linie 1 und endet bei Linie 4, nimmt also 3 Zellen ein. Wir könnten auch das Shorthand verwenden: grid-column: 1/4;
Oder wir geben nicht den Endpunkt an, sondern beschreiben, wie viele Zellen das Item einnehmem soll: gird-column: span 3;
Haben wir beim Anlegen der Vorlage den Linien Namen gegeben, können wir diese hier anstelle der Zahlen benutzen.
Hier wird den einzelnen grid-Items ein Name vergeben, der dann im grid-Container benutzt wird um eine Art Zeichnung des gewünschten Layouts anzufertigen. Außerdem steht uns der Punkt (.) zur Verfügung um eine leere Zelle zu definieren.
#box1{
grid-area: header;
}
#box2{
grid-area: nav;
}
usw.
#container{
gird-template-columns: 1fr 1fr 1fr 100px ;
grid-template-rows: 100px 50px 1fr 10% ;
grid-template-areas:
"header header header header"
"nav nav . sidebar"
"content content content sidebar"
"footer footer footer .";
}
Es gibt viele Eigenschaften für den container und die items um deren Aussehen und Ausrichtung anzupassen. Viele der möglichen Attribute sind die selben wie bei flexbox. Ich empfehle die unten verlinkte Seite css-tricks.com für eine gute Übersicht mit vielen grafischen Darstellungen.