Das neue CSS Grid Layout

[jscholtysik]

Hi,


seit heute ist das neue CSS Grid Layout in Firefox 52 verfügbar und soll nach und nach in allen Browsern implementiert werden. Der nächste Browser wird wahrscheinlich Google Chrome 57 am 14. März sein.

Grid Layout ermöglicht ganz neue Gestaltungsmöglichkeiten auf Basis von CSS, die weit über die Gestaltungsmöglichkeiten von Floats und auch der Flexbox hinausgehen, da z.B. Flexbox nur horizontale oder vertikale Anordnungen per CSS möglich macht, das Grid Layout jedoch gleichzeitig horizontale und vertikale Anordnungen und damit wesentlich komplexere Layouts umgesetzt werden können. Damit werden sogar gleichhohe Spaltenanordnungen oder ein Sticky Footer zum Kinderspiel.

Eine sehr gute Informationsquelle ist die Seite von Rachel Andrew unter http://gridbyexample.com/, die viele Videos anbietet und Beispiele zeigt, was alles mit dem neuen CSS Grid Layout möglich ist.

Ich freue mich auf jeden Fall schon drauf, zu sehen, was alles an neuen Layouts möglich ist!

[planepix]

… und ohne viel vorweg zu nehmen: Ein Thema auf der diesjährigen Contao Konferenz. All details coming soon…

[lucina]

Ergänzender Lesebefehl: https://css-tricks.com/snippets/css/...te-guide-grid/

[tab]

Naja, das wird wohl die Zukunft sein, falls nicht was noch besseres kommt. Momentan ist aber die Browser-Unterstützung mit 6,28% (inklusive Prefix) noch eher spärlich.

[lucina]

Bereits zur Jahresmitte werden es ca. 60% sein, da alle Desktopbrowser das in der nächsten Version ausrollen werden. Ich denke, man sollte sich damit beschäftigen.

[tab]

Damit beschäftigen natürlich in jedem Fall. Aber produktiv einsetzen würde ich das in den nächsten Monaten noch nicht wollen.

[mlweb]

Damit ich besser praktische Erfahrungen sammeln kann, setze ich neue Techniken sehr häufig mit Fallbacks ein.
Bei Flexboxes habe ich am Anfang (als es noch wenig Browserunterstützung gab) häufig für alle Browser die das noch nicht verstanden haben, ein klassisches Float-Layout als Fallback aufgebaut.
Werde ich mit Grid sicher ähnlich verfahren. Macht vielleicht unnötige Arbeit, schult aber auch, weil die Umsetzung eines realen Projektes halt doch etwas anders ist/andere "Haken" mit bringt als die Beispiele.

[mlweb]

Eben auch den Chrome-Browser aktualisiert und CSS-Grid ist wie vorab angekündigt auch hier verfügbar.
Also m.E. höchste Zeit sich ernsthaft damit zu befassen.

[jscholtysik]

Hier noch ein "kleines" Tutorial zum CSS Grid Layout..:

https://tympanus.net/codrops/css_reference/grid/

oder ein deutsches Tutorial von Jonas Hellwig, der ja auch auf der Contao Konferenz spricht... :

https://blog.kulturbanause.de/2013/1...layout-module/

[mlweb]

Hier auch noch ein Link zu den Webkrauts. Da wurden auch ein paar Links zum Thema gesammelt.
Und auch bei maddesigns gibt es was zum Thema.

[mlweb]

Bereits zur Jahresmitte werden es ca. 60% sein

Es sind gerade mal 2 Monate vergangen und in Deutschland sind es 67.14% (unprefixed: 57.17%).

[Fehrmann]

Spielend CSS-Grid lernen: http://cssgridgarden.com/