Grid: Ausrichtung

[Rolf B]

Hallo Joe,

Ist dieser Artikel eher für Profis geschrieben, die Deine Erläuterungen kennen? Für Einsteiger sicher nicht.

Da hast Du recht, das ist auch der Referenzartikel.

Das Tutorial ist hier:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Ausrichtung

wie definiere ich die horizontale Ausrichtung in den grid containern

Wie immer lautet die Antwort: kommt drauf an 😉. Man muss unterscheiden zwischen den Grid-Spalten, den Grid-Items in den Spalten und dem Inhalt der Grid-Items.

Mit justify-content definierst Du, wie die Spalten über die Breite des Grid verteilt werden.

Mit justify-items definierst Du, wie das Grid-Item innerhalb seiner Spalte ausgerichtet wird. Das hat nur dann eine Wirkung, wenn das Item schmaler ist als die Spalte (z.B. ein Bild mit fester Breite oder ein div, dessen Breite mit width oder max-width festgelegt ist).

Wenn der Inhalt der Spalte beispielsweise ein div ist und Du den Text im div ausrichten willst, bist Du noch eine Ebene tiefer und brauchst text-align.

Bei einem Spaltentemplate auto 10em 5em auto würde das Default-Verhalten des Grid (also stretch) darin bestehen, die beiden auto-Spalten so zu verbreitern, dass das Grid den ganzen Container füllt. Mit justify-content:start würden sie nur so breit gemacht werden, wie es der Inhalt erfordert, und die Spalten würden linksbündig im Grid-Container stehen.

Rolf