Working Draft

Working Draft


Revision 294: CSS Grids

March 22, 2017

Für diese Revision haben wir uns nach längerer Zeit mal wieder den Sven Wolfermann eingeladen, den man desöfteren auf Konferenzen, Community-Events und Unkonferenzen mit Vorträgen zu fortgeschrittenen CSS-Techniken antreffen kann. Selbiges gilt für sein Blog unter maddesigns.de. Denn wir wollten diese Woche gerne über die neuen CSS Grids sprechen, die jetzt nach und nach in den neuen Browsern freigeschaltet werden.
Bereits zum dritten Mal wird unser Podcast jetzt von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen. Dank verbesserter Technik verbindet sich der Messenger nun noch schneller mit der Gegenseite, und die Übertragungsqualität ist dabei auch noch gestiegen!

Schaunotizen

[00:02:28] CSS Grids
Lange wurde daran gearbeitet und wir hatten sie eigentlich schon letztes Jahr erwartet, nun ist es endlich soweit: CSS Grids kommen! Mit Sven sprechen wir darüber, welche Lücke die Grids füllen und inwiefern sie vergleichbar sind mit den guten alten Tabellenlayouts oder Flexbox. Weiter geht es mit der Frage des Browser-Supports, und ob der Internet Explorer mit seiner Vorversion von Grids gut genug ist, um den praktischen Einsatz zu wagen. Die Möglichkeiten und Vorzüge von Grids machen einige Demos deutlich, die man mal gesehen haben sollte:

Grid by Example
CSS Grid Article Layout
Async CSS Grid Article Layout (5 columns)
CSS Grids Panel
CSS Grid Layout – responsive gallery demo
Websafe colors meet CSS Grid (auto-placement demo)

CSS grid layout – skeleton demo steps
The Experimental Layout Lab of Jen Simmons

Wer nach unserem Gespräch Lust bekommen hat, sich selbst mit den CSS Grids zu befassen, dem empfiehlt Sven folgendes Lernmaterial, um schnell in die Spur zu kommen:

Grid by Example
Basic concepts of grid layout
CSS Reference: Grid
CSS Grid Layout Examples
Learn CSS Grid

Abschließend blicken wir in die Zukunft und sprechen über das Konzept der „Subgrids„, das von vielen Entwicklern im Zuge der Grids-Entwicklung nachgefragt wurde, und das in eine nächste Ausbaustufe des Layoutstandards gewandert ist.

[00:43:57] Keine Schaunotizen

Animista
Eine Bibliothek von fix und fertigen CSS-Animationen
Scram.js
Ein Electron-basiertes Framework, das es erlaubt, mit Web Components serverseitigen Code zu schreiben.