CSS: Grid

Ich bin ein großer Fan von CSS Flexbox und Grid. Allerdings gibt es ein paar Dinge, die ich mir nicht merken kann. Daher zur Abwechslung etwas CSS, in dem ich diese sowie ein paar Grundlagen zusammenfasse.

Meine nachfolgenden Beispiele sind für Spalten. Das Ganze kann natürlich auch in der gleichen Logik für Zeilen gemacht werden.

Einfaches Layout

Ein einfaches Grid mit drei fixen Spalten und so vielen Zeilen wie nötig.

grid-template-columns: 1fr 1fr 1fr;

Implizite Zellen

Implizite Zellen sind, im Vergleich zu expliziten Zellen solche, die erstellt werden, obwohl sie nicht explizit angegeben wurden. Im obigen Beispiel haben wir drei Spalten definiert. Haben wir aber z. B. 5 Einträge, dann standardmäßig implizit Zeilen für die restlichen Zellen erstellt.

Dieses Verhalten kann mit „grid-auto-flow“ geändert werden. Wird der Wert auf „column“ geändert, dann werden für die zusätzlichen Zellen keine Zeilen, sondern zusätzliche Spalten erstellt.

grid-auto-flow: column;

Neben „column“, gibt es u. a. noch „row“ und „dense“. „row“ dürfte klar sein. „dense“ ist etwas spezieller. Dies führt dazu, dass sich die fehlenden Zellen ggf. kreuz und quer verteilen und sich dort einfügen, wo Platz dafür ist.

Spalten mit „repeat“

Wenn ich ein Grid mit 6 Spalten will, kann ich Folgendes machen

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

oder ich verwende repeat dafür 😉

grid-template-columns: repeat(6, 1fr)

Das geht noch etwas interessanter. Mit dem nachfolgenden Beispiel werden in Summe 13 Spalten erzeugt. Die erste ist 100px, die zweite 1fr, die dritte 30px, die vierte 1fr, die fünfte 30px, …

grid-template-columns: 100px repeat(6, 1fr 30px)

Die Anzahl der Spalten soll sich automatisch anhand der verfügbaren Breite anpassen.

grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));

Hiermit werden so viele Spalten erstellt, wie benötigt, wobei die minimale Breite 50px und die maximale eine Fraction ist.

Falls mehr Platz verfügbar ist, als Spalten x Mindestbreite, werden die Spalten automatisch vergrößert. Habe ich z. B. eine Breite von 500px und nur zwei Spalten, dann werden die Spalten jeweils 250px breit.

Bei „auto-fill“ verhält sich dies etwas anders. Hier würden die Spalten trotzdem nur 50px breit sein und der Rest würde mit leeren Spalten aufgefüllt. Einen passenden Anwendungsfall, wann dies gewünscht ist, habe ich sowie viele andere allerdings noch nicht gefunden.

Zellen verbinden

Da ein Grid aus Spalten und Zeilen besteht, kann eine einzelne Zelle nicht einfach verkleinert oder vergrößert werden. Was wir aber machen können, ist sagen, dass die Zelle nicht nur den Platz der eigenen Spalte einnehmen soll, sondern auch den der nächsten Spalte. Dies wird mit „span“ gemacht. Die folgende Einstellung muss logischerweise auf der Zelle, nicht dem Grid gemacht werden.

grid-column: span 2;

Alternativ kann, wenn gewünscht, auch mit „grid-column-start“ und „grid-column-end“ gearbeitet werden. Hiermit streckt sich die Zelle automatisch von der zweiten bis zur fünften Spalte.

grid-column-start: 2;
grid-column-end: 4;

/* Alternative Schreibweise */
grid-column: 2 / 4;

Hierbei muss allerdings eine Sache erwähnt werden. Grid-Spalten beginnen mit 1 (nicht 0). Weiters erstreckt sich die Zelle nur bis zum Start der Spalte 4. Im nachfolgenden Screenshot wird das Ergebnis des obigen Beispiels angezeigt.

Soll die Zelle bei Spalte 1 starten und 3 Zellen verbinden.

grid-column: 1 / span 3;

Oder aber die Spalte soll bei 5 aufhören und drei Zellen davor verbinden.

grid-column: span 3 / 5;

Es kann hierbei auch mit negativen Werten gearbeitet werden. Dies ergibt aber nur beim „bis“ Sinn, da damit von der rechten Seite aus gezählt wird. -1 bedeutet im obigen Beispiel die Spalte 5, -2 wäre die Spalte 4. Um somit eine Zelle über die ganze Breite zu verbinden, wird folgendes gemacht.

grid-column: 1 / -1;

Spaltenbreite aufgrund von Inhalt

Es gibt auch noch ein paar Einstellungen, um eine Spalte so breit einzustellen, wie sie mindestens oder maximal benötigt.

Mit „min-content“ wird die Spalte so breit, wie sie mindestens aufgrund vom Inhalt benötigt.

grid-template-columns: min-content 1fr 1fr;

Mit „max-content“ wird die Spalte so breit, wie sie maximal aufgrund vom Inhalt benötigt:

grid-template-columns: max-content 1fr 1fr;

Und dann gibt es da noch „fit-content“. Dies verhält sich so ähnlich wie „max-content“, nur, dass zusätzlich eine maximale Breite angegeben werden kann.

grid-template-columns: fit-content(140px) 1fr 1fr;