grid mittig (horizontal) im screen

[Joachim]

Moin,

nachstehendes CSS führt zu einer Anordnung des grid am linken Bildschirmrand

div {
 display: grid;
  grid-template-columns: min-content min-content min-content;
 }

Wie kann ich dies zentrieren?

margin, text-align tun es nicht.

[Rolf B]

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:

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.

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

[Gunnar Bittersmann]

@@Joachim

div {
 display: grid;
  grid-template-columns: min-content min-content min-content;
 }

Wie kann ich dies zentrieren?

Möglichkeit 0: min-content deutet stark darauf hin, dass du kein Grid willst, sondern Boxen, die sich dem Inhalt anpassen. Dass grid also das falsche Werkzeug ist und flex das richtige.

flex-wrap gibt’s gratis dazu (für schmale Viewports). ☞ Beispiel

🖖 Live long and prosper