Aus dem Kurs: CSS Grid Grundkurs

Überblick über die Verteilungsmöglichkeiten

Aus dem Kurs: CSS Grid Grundkurs

Gratismonat starten Für Ihr Team erwerben

Überblick über die Verteilungsmöglichkeiten

“

Es gibt eine Reihe von Möglichkeiten, um die Elemente auf einem Raster zu verteilen und ihre Position zu bestimmen. Sehen wir uns diese im Überblick an. Es gibt zu erst einmal die ausführliche Variante, indem Sie grid-column-start, grid-column-end angeben oder Sie können verkürzt grid-column mit beiden Zahlen schreiben. Dann steht zuerst der Anfang und dann die Endposition und das funktioniert natürlich ebenfalls bei grid-row. Aber es gibt weitere Möglichkeiten, so können Sie, wenn das Element nur bis zur nächsten Zeile reicht, den Endpunkt weglassen. Das heißt, anstatt dieser Angaben, grid-column-start: 1, grid-column-end: 2, können Sie nur schreiben grid-column-start: 1 oder auch direkt grid-column: 1. Wenn Sie möchten, können Sie auch grid-area nutzen. Wichtig dabei ist die richtige Reihenfolge. Bei grid-area kommen dann alle vier Angaben. Sie müssen anfangen mit grid-row-start gefolgt von grid-column-start, dann grid-row-end und grid-column-end. Außerdem können Sie span nutzen. Wenn Sie angeben wollen, dass ein Element sich über mehrere Spalten oder Zeilen erstreckt, und dabei können Sie das folgendermaßen machen: Sie können angeben grid-column: 1 und als Endpunkt sagen, das Element soll sich über zwei Zellen erstrecken. Oder umgekehrt: Sie schreiben span am Anfang und geben nur den Endpunkt an. Wie Sie gesehen haben, gibt es eine Reihe von Möglichkeiten, um die Elemente auf dem Raster anzuordnen. Welche Sie benutzen, ist reine Geschmacksache. Ich persönlich find die Angaben mit span ganz intuitiv, weil man dann direkt sieht, was da auch geschieht.

Inhalt