Grid: Ausrichtung

[Joe]

Moin,
wenn ich es richtig verstanden habe, kann ich mit align-items Daten innerhalb der grid-container vertikal ausrichten.
Auf der Suche nach der horizontalen Ausrichtung von Elementen innerhalb von grids bin ich auf diese Seite gestoßen.
Leider verstehe dort nicht alles.
Was ist die Hauptachse eines Flex-Containers, was die inline-Achse eines Grid-Containers?
Warum sind im grid-Modell flex-Parameter (flex-start,flex-end) möglich?

[Rolf B]

Hallo Joe,

bei Flex gibt es die Hauptachse und die Querachse. Eine ist horizontal, die andere vertikal. Aber man kann nicht so einfach sagen, welche Achse wie verläuft. Das hängt von diversen anderen Eigenschaften ab.

Wenn wir erstmal bei „westeuropäischer“ Leserichtung bleiben, dann hängt es vor allem an flex-direction. Da gibt es vier Werte, und jeder davon legt die Hauptachse anders fest:

row

von links nach rechts

row-reverse

von rechts nach links

column

von oben nach unten

column-reverse

von unten nach oben

Die Querachse steht darauf im rechten Winkel. Bei flex-direction:row also von oben nach unten. Bei flex-direction:column von links nach rechts. Bei den reverse-Varianten müsste ich es ausprobieren.

Deswegen heißen die justify- oder align-Werte auch flex-start / flex-end und nicht flex-left oder flex-right.

Das Grid erbt diese Terminologie. Eine grid-direction gibt es allerdings nicht, die Hauptachse verläuft in Leserichtung. In einer „westeuropäischen“ Anordnung also von links nach rechts. Die Querachse verläuft in Zeilenrichtung, von oben nach unten. Das ändert sich bei Einsatz der CSS Eigenschaften direction und writing-mode, aber dafür bin ich kein Experte.

Die CSS Eigenschaften justify-content und align-items wurden für Flexbox geschaffen und deshalb heißen zwei Werte flex-start und flex-end. Mit der Einführung von Grid wurde die Anwendbarkeit der Eigenschaften erweitert, und die neuen Werte start und end eingeführt. Diese gelten für Flexbox und Grid, und für weitere Elemente, die einmal diese Eigenschaften verwenden können sollen. Das ist beim W3C in Arbeit.

Die Varianten start und end werden zumindest von Chromium Browsern für Flexbox nicht akzeptiert, für Grid aber schon. flex-start/flex-end werden, aus Kompatibilitätsgründen, für beides akzeptiert. Der Firefox verwendet start/end und flex-start/flex-end bei Flexbox und Grid synonym. Das ist die wunderbare Welt der living standards und der Rückwärtskompatibilität.

Rolf

[Joe]

Hallo Rolf,

bei Flex gibt es die Hauptachse und die Querachse. Eine ist horizontal, die andere vertikal. Aber man kann nicht so einfach sagen, welche Achse wie verläuft. Das hängt von diversen anderen Eigenschaften ab.

Wenn dies von diversen anderen Eigenschaften abhängt, dann wird der Text des zitierten Artikels für mich noch unverständlicher.
Ist dieser Artikel eher für Profis geschrieben, die Deine Erläuterungen kennen? Für Einsteiger sicher nicht.

Was ich eigentlich wissen wollte, nachdem die vertikale Ausrichtung klar ist:, wie definiere ich die horizontale Ausrichtung in den grid containern, definiert durch
grid-template-columns: auto 10em 5em auto;

[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

[Joe]

Hallo Rolf, ich bin am Verzweifeln!

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).

Diesen Fall konnte ich hier
nicht nachvollziehen.

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.

Dies gilt auch für p-tags und andere(?)

Und warum geht das div im Gegensatz zu den p über zwei Zeilen?

[Rolf B]

Hallo Joe,

Diesen Fall konnte ich hier nicht nachvollziehen.

Ja. Hm. Das kann auch verwirrend sein.

Die *-content Angaben beziehen sich dabei, wie schon gesagt, auf das Verhalten der Grid-Spalten und -Zeilen. Deswegen musst Du sie in dem Grid-Container machen, nicht in den Grid-Items.

Die *-items Angaben werden ebenfalls im Grid-Container gemacht. Sie sind der Vorgabewert für alle Grid-Items, wie sie sich innerhalb der Zeilen und Spalten ausrichten sollen. Und wie gesagt: das hat nur Effekt, wenn Bewegungsspielraum da ist. Ein p Element breitet sich von Hause aus über die verfügbare Breite aus, so dass ein justify-items für ein p Element nichts bewirkt. Wenn Du da etwas sichtbares erreichen willst, müsstest Du dem p-Element eine Breite geben, die schmaler ist als die Grid-Spalte, in der es steht.

Die Vorgabewerte der *-items Angaben kannst Du dann noch für einzelne Grid-Items überschreiben. Das passiert in CSS Regeln für die Items, und die zugehörigen Eigenschaften heißen justify-self und align-self.

Das div ist höher als die p, weil p Elemente oben und unten einen Randbereich (margin) haben. Und weil Grid-Items einen Blockformatierungskontext bilden, bleibt der Rand innerhalb der Grid-Zelle und wird nicht mit dem Rand der Elternelemente (z.B. dem margin auf body-Ebene) kombiniert. Dadurch wird die Gridzeile um den Randbereich der p Elemente höher. Und weil der Defaultwert für align-items stretch ist, wird die Höhe des div so gesetzt, dass es so hoch ist wie ein p-Element inclusive Margin.

Füge mal

p { margin: 0; }

hinzu. Dann ist alles gleich niedrig.

Und dann nimm die Regel wieder weg, und füge statt dessen im div.dz die Angabe align-self: center; hinzu. Oder `align-self: end;'. Allerdings ist das div (in FF und auch Chrome) dann 2px flacher p Elemente. Keine Ahnung, wieso, das kann ich nicht erklären.

Rolf

[Joe]

Lieber Rolf,
ich geb's auf. Das ist mir alles zu kompliziert. Ich versuche es ohne grid.
Vielen Dank für den hohen Aufwand, den Du getrieben hast.