Grid: Ausrichtung

[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