Ausrichtung von Grid -gute Beispiele gesucht

[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