Gedanken zum Wochenanfang: CSS Grid und Layout-Frameworks

[Gunnar Bittersmann]

“Now we don’t even remember the graphic design ideas we use to have. We stopped being creative. We submitted to the constraints of the float.”

In ihrem Artikel The benefits of learning how to code layouts with CSS beklagt sich Jen Simmons, dass Webseiten alle irgendwie gleich aussehen, weil alle dieselben Frameworks verwenden und alle in ihren gefangen sind.

Mit CSS Grids sollte damit Schluss sein: “CSS Grid is the layout framework. Baked right into the browser.”

LLAP 🖖

[Matthias Scharwies]

Servus!

In ihrem Artikel The benefits of learning how to code layouts with CSS beklagt sich Jen Simmons, dass Webseiten alle irgendwie gleich aussehen, weil alle dieselben Frameworks verwenden und alle in ihren gefangen sind.

Mit CSS Grids sollte damit Schluss sein:

Diesen monat bringen alle großen Browser neue Versionen heraus, die Grid-Layout unterstützen.

Hättest Du nicht Lust einen Self-Blog-Artikel über Grid-Layout zu schreiben?

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Diesen monat bringen alle großen Browser neue Versionen heraus, die Grid-Layout unterstützen.

Dass das im März passieren soll, kann man aber caniuse nicht direkt entnehmen, oder finde ich nur die relevante Stelle nicht?

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

Diesen monat bringen alle großen Browser neue Versionen heraus, die Grid-Layout unterstützen.

Dass das im März passieren soll, kann man aber caniuse nicht direkt entnehmen, oder finde ich nur die relevante Stelle nicht?

Na ja, die nächsten Versionen, siehe hier: Grid Layout im Wiki vom 28.02.2017

Release Date für FF52 ist 06.03.2017 (hey, das wär ja heute)

Chrome 57 kommt irgendwann Mitte März raus (siehe unten im Kommentar)

Opera 44 ein bisschen später.

Safari 10.1 noch später.

Edge unterstützt die alte Syntax mit vendor-prefixes. Mal schau'n, wann die nachziehen.

Was meinst Du, warum jeder Blog zur Zeit was über Grid-Layout bringt?

Herzliche Grüße

Matthias Scharwies

[beatovich]

hallo

In ihrem Artikel The benefits of learning how to code layouts with CSS beklagt sich Jen Simmons, dass Webseiten alle irgendwie gleich aussehen, weil alle dieselben Frameworks verwenden und alle in ihren gefangen sind.

Eigentlich ist es mir egal, ob Wellen von Websites gleichartig aussehen. Dieser Blog ist auf jeden Fall sehr angenehm zu lesen. Und ich werde mir diese Idee, den Titel eines Artikels seitlich anzuzeigen merken.

[1unitedpower]

“Now we don’t even remember the graphic design ideas we use to have. We stopped being creative. We submitted to the constraints of the float.”

Netter Artikel und ich freue mich drauf Grids mal auszuprobieren. Allerdings habe ich meine Zweifel daran, dass Grids tatsächlich ein Gamechanger seien werden. Das letzte coole Kid (Flexbox) wollte das auch sein, sowieso diverse noch ältere Versuche. Immer mit dem selben Ergebnis: Jetzt haben wir einen weiteren Layout-Algorithmus.

Mit CSS Grids sollte damit Schluss sein: “CSS Grid is the layout framework. Baked right into the browser.”

Gerade diese Aussage trifft nämlich exakt nicht auf CSS Grid zu: Es ist eben kein Framework, es ist nur eine weiterer alternativer Layout-Algorithmus mit neuen Trade-Off-Positionen. Es ermöglicht uns aber nicht, unsere eigenen Layout-Algorithmen zu entwerfen. Die obenstehende Aussage und viele der Argumente des Artikels passen aber perfekt zur Layout-API von CSS Houdini: Die stellt uns nämlich wirklich primitive Operationen bereit, die wir brauchen, um selber völlig neue Layout-Algorithmen und damit Layouts zu entwerfen. Das ist das Pferd, auf das ich in naher Zukunft setzen würde. Damit sind nicht mehr nur ausschließlich die Spec-Autoren und Browser-Hersteller an der Entwicklung neuartiger Layout-Techniken beteiligt, sondern jeder Frontendler kann seinen Teil beitragen. Das ebnet den Boden für Vielfalt und schnell voran schreitende Evolution im Layouting. Dafür müssen wir wohl auch noch länger darauf warten - in der Zwischenzeit füllen Grids eine Lücke aus.

[Matthias Scharwies]

Servus!

Die obenstehende Aussage und viele der Argumente des Artikels passen aber perfekt zur Layout-API von CSS Houdini: Die stellt uns nämlich wirklich primitive Operationen bereit, die wir brauchen, um selber völlig neue Layout-Algorithmen und damit Layouts zu entwerfen. Das ist das Pferd, auf das ich in naher Zukunft setzen würde. [...]

Dafür müssen wir wohl auch noch länger darauf warten - in der Zwischenzeit füllen Grids eine Lücke aus.

@1unitedpower Das wäre doch auch was für einen Self-Blog-Artikel, oder nicht? Quasi als Vorschau?

Herzliche Grüße

Matthias Scharwies

[beatovich]

hallo

passen aber perfekt zur Layout-API von CSS Houdini:

Toller Name ;)

[Gunnar Bittersmann]

@@1unitedpower

Das letzte coole Kid (Flexbox) wollte das auch sein, sowieso diverse noch ältere Versuche. Immer mit dem selben Ergebnis: Jetzt haben wir einen weiteren Layout-Algorithmus.

[XKCD Comic über IT-Standards]

CSS Grid steht nicht in Konkurrenz zu Flexbox; sie erfüllen unterschiedliche Zwecke: Flexbox wirkt in eine Richtung. Mit flex-wrap: wrap kann man auch 2D-Gebilde realisieren, aber nicht wirklich Grids.

Beispiel: Liste mit Items, alle gleich breit, mindestens 10em, maximal 20em. Seien es 12 an der Zahl und der Vieweport so, dass 5 nebeneinander passen. Es dürfte mit Flexbox unmöglich sein, dass die letzten beiden identisch breit wie die in den drüberliegenden Zeilen sind.

Für zueinander passende Boxen in 2D sind Grids da.

Gerade diese Aussage trifft nämlich exakt nicht auf CSS Grid zu: Es ist eben kein Framework

Natürlich nicht. Das ist ja gerade die Aussage von Jen Simmons: Man braucht keine Grid-Frameworks mehr, um ein Grid-Layout mit CSS zu realisieren.

CSS Grid ist genausowenig ein Framework wie Fukol eins ist.

LLAP 🖖

[1unitedpower]

Gerade diese Aussage trifft nämlich exakt nicht auf CSS Grid zu: Es ist eben kein Framework

Natürlich nicht. Das ist ja gerade die Aussage von Jen Simmons: Man braucht keine Grid-Frameworks mehr, um ein Grid-Layout mit CSS zu realisieren.

Da habe ich Jen Simmons anders verstanden, ich merke aber, dass ich mich konkretisieren muss, um meine Sichtweise zu verdeutlichen. Unter einem Layout-Algorithmus verstehe ich die verschiedenen Layout-Modi, die durch die display-Eigenschaft ausgelöst werden. Davon haben wir im Web eine ganze Reihe: block, inline, flex, flow, grid etc. MDN listet da derzeit über 40 verschiedene Algorithmen und Kombinationen der selben auf. Abhängig von dem Wert für display ergeben sich natürlich weitere CSS-Eigenschaften wie float, width, flex-grow usw., um das Layout-Verhalten weiter zu verfeinern.

Ich kann dir und Jen in soweit zustimmen, dass keiner der existierenden Algorithmen für sich alleine genommen die beste Lösung für jeden Anwendungsfall bilden kann. Um das best mögliche Ergebnis zu erzielen muss man sie intelligent miteinander kombinieren. Ich widerspreche aber dabei inwiefern CSS-Grids da eine Generalisierung ermöglichen und uns in eine neue Ära katapultieren sollten.

Unter einem Layout-Framework verstehe ich eine Sammlung an Funktionen, die es ermöglichen ganz neue Layout-Algorithmen zu entwerfen. Dazu wendet man seinen Blick am besten auf Layout-Algorithmen, die uns im Web bisher nicht zur Verfügung stehen und hinterfragt, inwiefern uns CSS-Grids dabei helfen diese zu implementieren. CSS-Houdini nennt da zum Beispiel die folgenden Kandidaten: Constraint based layouts und Masonry layouts.

CSS Grids lösen ein sehr spezifisches Layout-Problem und mögen Grid-Frameworks in Zukunft überflüssig machen^[1]. CSS Houdini ist dagegen tatsächlich ein Layout-Framework, um diverse Layout-Probleme zu lösen - damit findet eine echte Generalisierung statt.

---

1. Wobei ich mir da auch nicht so sicher bin, da sich die APIs von CSS Grids und bestehenden Grid-Frameworks ziemlich stark unterscheiden. Ich rechne eher damit, dass sich neue Grid-Frameworks bilden werden, die auf CSS Grids aufbauen, aber viele Details in leichter verständlichen APIs zugänglich machen. Aber Prognosen sind bekanntlich schwierig, besonders wenn sie die Zukunft betreffen. ↩︎

[Gunnar Bittersmann]

@@1unitedpower

CSS Grids lösen ein sehr spezifisches Layout-Problem und mögen Grid-Frameworks in Zukunft überflüssig machen.

Genau.

Wobei ich mir da auch nicht so sicher bin, da sich die APIs von CSS Grids und bestehenden Grid-Frameworks ziemlich stark unterscheiden. Ich rechne eher damit, dass sich neue Grid-Frameworks bilden werden, die auf CSS Grids aufbauen, aber viele Details in leichter verständlichen APIs zugänglich machen.

Ich glaube nicht, dass es Frameworks bedarf, um Details zugänglich zu machen. Die werden sich bei der Spec schon was gedacht haben. Wenn’s leichter ginge, hätten sie’s gleich so spezifiziert.

Aber möglich, dass du mit deiner Prognose aus einem anderen Grund recht behältst: Manche „Entwickler“ wollen einfach, dass ein Ding einen Namen hat und fühlen sich ohne Framework verloren. WTFukol

Aber Prognosen sind bekanntlich schwierig, besonders wenn sie die Zukunft betreffen.

Das sowieso.

LLAP 🖖

[Tabellenkalk]

Hallo,

Manche „Entwickler“ wollen einfach, dass ein Ding einen Namen hat und fühlen sich ohne Framework verloren. WTFukol

Puh, ist das ein Freudscher Verschreiber, oder meint Jani wirklich „pooetry“?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Manche „Entwickler“ wollen einfach, dass ein Ding einen Namen hat und fühlen sich ohne Framework verloren. WTFukol

Puh, ist das ein Freudscher Verschreiber, oder meint Jani wirklich „pooetry“?

„Starting from the name“ lässt sich vermuten, dass das beabsichtigt war.

Aber wie wahsaga sagte: You'll never know ... :-)

LLAP 🖖

[Tabellenkalk]

Hallo,

„Starting from the name“ lässt sich vermuten, dass das beabsichtigt war.

Tja, diese Vokabel kam in meinem Englisch-Unterricht nicht vor und auch das Online-Dictionary kennt „Fukol“ nicht. Ich kann dein „lässt sich vermuten“ „leider“ nicht nachvollziehen.

Gruß
Kalk

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Mein geschätzter Kollege hat gestern bei den Webworkern NRW einen Vortrag „Grids & Glory“ gehalten, die Folien könnt ihr euch ansehen.

Die Browserunterstützung ist schon besser.

Edit: Folie ist aktualisiert.

LLAP 🖖