Hallo Joachim, das div ist mit dem gezeigten CSS so breit wie sein Elternelement. D.h. wenn es im body steht, ist es so breit wie der Body, also im Wesentlichen so breit wie der Viewport. Die Spalten darin hast Du auf minimale Breite des Inhalts gesetzt, deswegen dehnen sie sich nicht über die Breite des Grids aus und stehen linksbündig (am Zeilenanfang). Du möchtest, dass die 3 Grid-Spalten in der Mitte des Viewports stehen (bzw. in der Mitte des Elternelements vom Grid). Möglichkeit 1: Lass das grid-div so breit wie es ist und zentriere die Spalten mit [justify-content](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/justify-content): ~~~css div { display: grid; grid-template-columns: repeat(3, min-content); gap: 0.5em; justify-content: center; } ~~~ Das gap gibt's gratis dazu. Es ist in den meisten Fällen sinnvoll. justify-content zentriert die Spalten innerhalb des Grid-Elements. Einen Effekt hat es nur, wenn der Grid-Container breiter ist als alle Spalten zusammen – also bei Dir zuum Beispiel. Schau es Dir in den Entwicklerwerkzeugen an, die zeigen Dir, wenn Du auf den "grid"-Button neben dem div klickst, die Abgrenzungslinien. Exkurs: Im Gegensatz dazu steht [justify-items](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/justify-items), das zentriert die Inhalte innerhalb der Spalten. Das ergibt aber nur einen Sinn wenn die Tracks breiter sind als die Items, probiere es mit einer Spaltenbreite aus, die groß genug ist und gib den inneren divs einen Rahmen, damit man es erkennt. Möglichkeit 2: Mach das grid-div nur so schmal wie nötig (width) und zentriere per Margin das ganze Grid. ~~~css div { display: grid; grid-template-columns: repeat(3, min-content); gap: 0.5em; width: fit-content; margin-inline: auto; } ~~~ Wann was verwenden? Solage das Grid-div keinen Rahmen und keine Hintergrundfarbe hat, ist es wurscht. Mit Rahmen und/oder Hintergrundfarbe gibt's deutliche visuelle Unterschiede. Probiere es aus. Möglichkeit 3: Manchmal soll ein Grid im normalen Fluss mitschwimmen. Z.B. weil es mehrere Grids sind, oder ein Grid und ein Bild. Dafür gibt es `display:inline-grid`. Ein inline-grid ist immer nur so breit wie sein Inhalt, und es kann mit text-align in seinem Elternelement beeinflusst werden. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Joachim, das div ist so, wie gestyled, so breit wie sein Elternelement. D.h. wenn es im body steht, ist es so breit wie der Body, also im Wesentlichen so breit wie der Viewport. Du möchtest, dass die 3 Grid-Spalten in der Mitte des Viewports stehen (bzw. in der Mitte des Elternelements vom Grid). Möglichkeit 1: Lass das grid-div so breit wie es ist und zentriere die Spalten: ~~~css div { display: grid; grid-template-columns: repeat(3, min-content); gap: 0.5em; justify-content: center; } ~~~ Das gap gibt's gratis dazu. Es ist in den meisten Fällen sinnvoll. justify-content zentriert die Spalten innerhalb des Grid-Elements. Einen Effekt hat es nur, wenn der Grid-Container breiter ist als alle Spalten zusammen – also bei Dir zuum Beispiel. Schau es Dir in den Entwicklerwerkzeugen an, die zeigen Dir, wenn Du auf den "grid"-Button neben dem div klickst, die Abgrenzungslinien. Exkurs: Im Gegensatz dazu steht justify-items, das zentriert die Inhalte innerhalb der Spalten. Das ergibt aber nur einen Sinn wenn die Tracks breiter sind als die Items, probiere es mit einer Spaltenbreite aus, die groß genug ist und gib den inneren divs einen Rahmen, damit man es erkennt. Möglichkeit 2: Mach das grid-div nur so schmal wie nötig (width) und zentriere per Margin das ganze Grid. ~~~css div { display: grid; grid-template-columns: repeat(3, min-content); gap: 0.5em; width: fit-content; margin-inline: auto; } ~~~ Wann was verwenden? Solage das Grid-div keinen Rahmen und keine Hintergrundfarbe hat, ist es wurscht. Mit Rahmen und/oder Hintergrundfarbe gibt's deutliche visuelle Unterschiede. Probiere es aus. Möglichkeit 3: Manchmal soll ein Grid im normalen Fluss mitschwimmen. Z.B. weil es mehrere Grids sind, oder ein Grid und ein Bild. Dafür gibt es `display:inline-grid`. Ein inline-grid ist immer nur so breit wie sein Inhalt, und es kann mit text-align in seinem Elternelement beeinflusst werden. _Rolf_ -- sumpsi - posui - obstruxi