Ausrichtung von Grid -gute Beispiele gesucht

[Matthias Scharwies]

Mahlzeit!

Letztens gab's wieder ne Frage zu

CSS/Tutorials/Grid/Ausrichtung von Grid-Items

Problem von Nutzern und Foristen ist oft, dass sie viele Eigenschaften kombinieren, ohne genau zu wissen, wie sich das auswirkt.

Problem unserer Beispiele ist, dass unsere Beispiele oft eher „technisch“ und deshalb nicht wirklich hilfreich sind.

• Vertikale Ausrichtung

• etwas besser

Ich habe jetzt einiges ergänzt:

• Bilder - mittig angeordnet
• Preise - rechts angeordnet

Gutes Beispiel gesucht!

Und jetzt steh ich wie der Ochs vorm Berg und suche ein best practice-Beispiel für justify-items.

• Ausrichtung_von_Grid-Items#justify-items

Ich persönlich würde da immer mit gap arbeiten.

Hat jemand eine Idee oder sogar ein Beispiel aus dem richtigen Leben?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Beispiel aus dem richtigen Leben - hm. Meine Grids sind zumeist so gestaltet, dass sie den verfügbaren Raum ausfüllen und die Zellen darin so groß sind wie die Grid-Tracks.

Aber das ist ja nicht zwingend so. Und ich meine, man sollte mit den *-content Eigenschaften anfangen. Ein Grid besteht aus Tracks (Zeilen oder Spalten), und wenn diese nicht die ganze Länge ihrer Achse ausfüllen, gibt's Platz. Und für den muss man entscheiden, wo er bleibt. Vorn, hinten, verteilt, es gibt eine Menge Optionen.

Auf diese Weise entsteht ein Haufen von Gridzellen, und in denen können die Grid-Items erscheinen. Wenn ein Grid-Item so groß ist wie seine Zelle, gibt's für die *-items Eigenschaften nichts zu tun. Aber ist das Item kleiner, kann man es links, rechts, oben, unten ausrichten, zentrieren oder strecken.

ANSTELLE das Item zu platzieren, kann man auch den Inhalt des Items verändern. Ich kann einem Grid-Item mit justify-self:stretch die Breite seines Tracks geben und seinen Inhalt mit text-align:right rechts ausrichten. Ich kann aber auch justify-self:end setzen und den Inhalt auf text-align:left lassen. Das hat visuell leicht andere Effekte.

Wie man diesen Variantenreichtum rüberbringt - hm. Ich habe vielleicht eine kreative Idee.

Rolf

[Rolf B]

So, hier.

Das ist ein proof-of-concept, keine fertige Lösung, und das kann man noch für weitere Parameter ausweiten.

Man sieht ein main-Element, das ein Grid ist, mit drei horizontalen und drei vertikalen Tracks. Für die Spalten kann man den Wert von justify-content und justify-items mittels Radiogruppen auswählen.

justify-self und die align-Gruppe ist noch offen.

Taugt das was als Visualisierung der Parameter?

Ein Praxisbeispiel hab ich deswegen immer noch nicht. Vieles, was man mit justify-items machen kann, ist auch mit text-align lösbar. Aber eben nicht alles…

Rolf

[Matthias Scharwies]

Hallo zusammen!

So, hier.

Super - aber wo ist das JavaScript? alles nur mit CSS? +1 😀

Das ist ein proof-of-concept, keine fertige Lösung, und das kann man noch für weitere Parameter ausweiten.

Taugt das was als Visualisierung der Parameter?

Ja, besonders weil die tracks und damit auch die gutters (Da hatten wir schon 2017 gute deutsche Wörter für gesucht) so schön visualisiert sind!

Ja, es visualisiert die Parameter.

Problem unserer Beispiele ist, dass unsere Beispiele oft eher „technisch“ und deshalb nicht wirklich hilfreich sind.

Dein Beispiel könnte ich mir für den Anfang des Kapitels vorstellen. Aber dann kommt eben die Frage: Wozu brauch ich das im wirklichen Leben?

Und da kommen eben meine Erfahrungen mit Nutzern und Fragenden im Forum ins Spiel:

Element im GRID-Container ausrichten

Ich bin gerade noch bei der Fehlersuche dabei.

Diese Texte sollen hier Link 1,2,3 sein. Also eigentlich schon direkt unten im Element 2.

@RalphT wollte eben nicht die Grid-Items, sondern Inhalte im Grid-Item ausrichten.

---

@michaah schrieb 2020:

Zugegebenermaßen habe ich von der Desktopvariante eine bestimmte gestalterische Vorstellung, die, salopp gesagt, mit "lass den Browser und die Gridlogik mal machen und herumschieben" nicht erreicht werden kann. Aber das ist definitiv eine Hürde ich mir selbst dahingestellt habe ;-) .

Lest euch mal seine Versuche durch. grid-template-areas, die durch grid-column wieder überschrieben wurden; ca. 60 Zeilen CSS und als Quintessenz dann: Grid funktioniert nicht.

Deshalb wollte ich weg von den festen „Tabellen“ A1, A2, A3, … - C3, die es im normalen Leben so nicht gibt - ich bin immer noch auf der Suche nach einem Beispiel dafür.

Beispiel aus dem richtigen Leben - hm. Meine Grids sind zumeist so gestaltet, dass sie den verfügbaren Raum ausfüllen und die Zellen darin so groß sind wie die Grid-Tracks.

Genau, die neuen Beispiele in diesem Kapitel benutzen alle so etwas wie
grid-template-columns: repeat(auto-fill, minmax(9em, 15em));

Aber das ist ja nicht zwingend so. Und ich meine, man sollte mit den *-content Eigenschaften anfangen. Ein Grid besteht aus Tracks (Zeilen oder Spalten), und wenn diese nicht die ganze Länge ihrer Achse ausfüllen, gibt's Platz. Und für den muss man entscheiden, wo er bleibt. Vorn, hinten, verteilt, es gibt eine Menge Optionen.

Auf diese Weise entsteht ein Haufen von Gridzellen, und in denen können die Grid-Items erscheinen. Wenn ein Grid-Item so groß ist wie seine Zelle, gibt's für die *-items Eigenschaften nichts zu tun. Aber ist das Item kleiner, kann man es links, rechts, oben, unten ausrichten, zentrieren oder strecken.

Diese beiden Absätze sind gut formuliert, aber wie du oben schon gesagt hattest:

Gerade wegen der Vielzahl von Nutzern mit schmalen Viewports vermeide ich es wie die Pest, Spalten eine feste Breite von 12em zu geben, damit nach der 3. Spalte 9em Platz übrig bleibt, den ich dann verteilen muss.

Ich habe die Kapitel Grid-Container und Grid-Items hier zu CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung zusammengefasst. Es ist noch lange nicht fertig; aber Ziel ist es eben den Browser machen zu lassen anstatt 3 Spalten mit je 100px Breite festzulegen.

Deshalb hatte ich ehemals "Mehrspaltige Layouts" als CSS/Tutorials/Grid/Einführung vorgezogen. Hier sieht man, was man mit 8 Zeilen CSS alles erreichen kann:

body {
	display: grid;
	gap: 0.5em;
}

/* 3-spaltiges Layout für breitere Viewports */
@media (min-width: 45em) {
	body {
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: auto 1fr min-content;
	}
}

header,footer {
	grid-column: 1 / -1;
}

[...]

Ein Praxisbeispiel hab ich deswegen immer noch nicht. Vieles, was man mit justify-items machen kann, ist auch mit text-align lösbar. Aber eben nicht alles…

Ebent! Und das soll im Tutorial rüberkommen: interessante Sachen, aber eigentlich könnt ich auch mit text-align.

Zum Beispiel mit justify-self schrieb ich:

„Hier stellt sich jetzt die Frage, wann man die oben besprochenen Eigenschaften oder Alternativen wie [[text-align|text-align: right;]] verwenden sollte. Bei <code>text-align</code> bleibt der Absatz 100% breit, was erst bei einer Färbung des Hintergrunds auffällt. Meiner Meinung nach ist <code>justify-self</code> hier eleganter.“

Da können wir ja noch ein paar Wochen nach guten Beispielen suchen.

Heute Abend kann ich leider nicht - es ist aber auch nichts ausgemacht gewesen. Nächsten Mittwoch bin ich in Hannover.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

alles nur mit CSS? +1

Dafür aber mit Checkbox-Hack (bzw. Radiobutton-Hack). Der ist schlecht zugänglich, aber ich fand ihn hier brauchbar, weil es jemandem, der Assistenztechnik braucht, mutmaßlich egal ist, ob Grid-Spalten links, rechts oder in der Mitte stehen. Die Lesbarkeit für den Screenreader ist davon komplett unabhängig.

Und bevor ich wieder die Ableism-Keule bekomme: Wie ich jemandem, der nicht sehen kann, die Anordnung von Grid-Tracks nahebringen soll, wäre mir absolut unklar. Wer nicht sieht, dem sollten justify und align von Tracks und Items schnuppe sein.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die Lesbarkeit für den Screenreader ist davon komplett unabhängig.
[…]
jemand, der nicht sehen kann

Du begehst hier aber nicht schon wieder den Fehler zu denken, Screenreader-Nutzer könnten nicht sehen?

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

wie schön, dass Du wiedermal eine feine Nase dafür hast, das Relevante vom Irrelevanten zu unterscheiden. Und Dich auf das Irrelevante stürzt.

Also nochmal für Dich: wer sehen kann und sich mit den Eigenschaften dieser CSS-Eigenschaften befassen will, der nutzt keinen Screenreader. Weil der auf Inhalte eingeht und nicht auf Darstellung.

Rolf

[Matthias Scharwies]

Guten Morgen,

ich hatte lange überlegt und mögliche Beispiele gesammelt.

Mir war wichtig, dass wir nicht jede Eigenschaft mit allen möglichen Werten vorstellen, sondern eben auswählen, wann man welche Eigenschaften verwendet und wann man sie besser weglässt.

So, hier.

Das ist ein proof-of-concept, keine fertige Lösung, und das kann man noch für weitere Parameter ausweiten.

Ich habe jetzt doch eine Lösung mit JavaScript umgesetzt:

• CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items#Funktionsweise

Die folgenden Beispiele zeigen immer nur einen Anwendungsfall - auch die Positionierung der figcaption aus dem Nachbar-Thread hat es in den Artikel geschafft.

CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items#Ausrichtung_von_Grid-Containern

place-content und align-content schieben ja den gesamten Grid-Container. Hier habe ich auf ein Beispiel verzichtet und auf Rolfs Artikel

• CSS/Tutorials/Ausrichtung/Inhalte_zentrieren

verwiesen.

Herzliche Grüße

Matthias Scharwies