css: grid mit autofill erscheint linksbündig - kann man auch zentrieren?

[Torsten]

Hallo Leute,

erstmal vielen Dank für die tolle selfhtml-Seite mit den vielen Tutorials und das Ihr hier ein Forum betreibt. Ich habe bereits viel ausprobiert und würde nun gern in einem Bereich meiner Homepage grid und autofill einsetzen wollen. Die Idee der "Responsivität ohne Media queries" finde ich genial. Leider bekomme ich es bei diesem Beispiel nicht hin, die einzelnen Elemente zu zentrieren, wenn der Platz dafür vorhanden wäre. Eigentlich sollen die Elemente ja den gesamten Bildschirm ausnutzen, was aber bei bestimmten Fenstergrößen nicht geht. Und in diesem Fall hier nochmal im Vollbild wäre es toll, wenn die Elemente nicht auf der linken Seite kleben würden sondern zentriert in der Mitte. Auch bei 2 Elementen würde ich mir wünschen, dass die schön ausgemittelt und zentriert in der Mitte des Bildschirms plaziert würden.

justify-content: center oder space-evenly kommt meinem Wunsch schon sehr nahe. Aber das "<aside>-Element Top-News" oder ganz unten der "<footer> Kontakt" bleiben trotzdem solange ganz links (und nicht zentriert!), bis genug Platz vorhanden ist und dann eine Reihe hochspringt.

Habt Ihr eine Idee? Oder hat man bei Verwendung der Autofill-Option diese Möglichkeiten gar nicht?

[Rolf B]

Hallo Torsten,

du hast bloß noch nicht weit genug gelesen. Abschnitt 6 der Grid-Artikelreihe (Ausrichtung) ist dein Freund.

/*selektor*/ {
   display: grid;
   justify-content: center
}

Rolf

[Torsten]

Hallo Rolf, vielen Dank für Deine Antwort. Allerdings bin ich mit grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); nicht zum gewünschten Ergebnis gekommen, dafür aber damit: grid-template-columns: repeat(auto-fit, minmax(21em, 1fr)); justify-content: center;

auto-fit packt die Spalten in das verfügbare Platzangebot, auto-fill fügt neue Spalten hinzu, selbst wenn sie leer bleiben. So weit ich das jetzt verstanden habe, befinden sich bei auto-fill also immer leere Elemente daneben, weswegen ich meine sichtbaren Inhalte gar nicht zentrieren kann.

[Gunnar Bittersmann]

@@Torsten

Hallo Rolf, vielen Dank für Deine Antwort. Allerdings bin ich mit grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); nicht zum gewünschten Ergebnis gekommen, dafür aber damit: grid-template-columns: repeat(auto-fit, minmax(21em, 1fr)); justify-content: center;

Nein, das ist nicht das gewünschte Ergebnis. Jedenfalls nicht für mich, wenn ich deine Seite auf meinem Gerät aufrufe. Mein Viewport ist schmaler als 21em; demzufolge passen die Gridzellen nicht hinein; es muss horizontal gescrollt werden.

Die Breite muss auf 100% begrenzt werden:
repeat(auto-fit, minmax(min(21em, 100%), 1fr))

Ich habe den Fehler im Wiki schon vor einem Jahr angemerkt; er wurde nicht verbessert. 😔

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

er wurde nicht verbessert

diese Aktivität steht jedem Vereinsmitglied und auch Gästen zu.

Rolf

[Gunnar Bittersmann]

@@Rolf B

er wurde nicht verbessert

diese Aktivität steht jedem Vereinsmitglied und auch Gästen zu.

Wie aus dem Thread zu erkennen ist, war Matthias zu dem Zeitpunkt gerade an dem Artikel dran. Keine Ahnung, warum das dann nicht eingeflossen ist.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar Bittersmann,

ja gut. Ich hab mal die Feile angesetzt. Besser?

Bei auto-fit bin ich heute abend 'raus, das muss ich erst nochmal rekapitulieren.

Rolf