Revision 294: CSS Grids
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.
- 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.