Hallo zusammen! > So, [hier](https://jsfiddle.net/Rolf_b/phkxuqo3/). 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](https://forum.selfhtml.org/self/2024/oct/13/element-im-grid-conainer-ausrichten/1817110#m1817110) >>> [](/images/7027e506-8970-11ef-8897-9c6b00263d9f.jpg)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](https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775007#m1775007): >>>>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 bleiben, die ich dann verteile. Ich habe die Kapitel Grid-Container und Grid-Items hier zu [CSS/Tutorials/Grid/**Implizite_und_explizite_Erzeugung**](https://wiki-test.selfhtml.org/wiki/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**](https://wiki-test.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung) vorgezogen. Hier sieht man, was man mit 8 Zeilen CSS alles erreichen kann: ~~~ CSS 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items#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 Hintergunds 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 -- Was ist eine Signatur?