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](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) 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 ~~~css 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_ -- sumpsi - posui - obstruxi

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](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) 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 ~~~css 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. ~~~css _Rolf_ -- sumpsi - posui - obstruxi