Es fühlt sich so an, als ob CSS Grid schon lange auf dem Markt ist, aber es scheint gerade einen Punkt zu erreichen, an dem die Leute immer mehr darüber reden und dass es etwas wird, das wir lernen sollten. Ich habe in den letzten Wochen angefangen, ein paar Beiträge zu lesen und mit der Syntax herumzuspielen, aber meine CSS-Trickster-Kollegin Miriam Suzanne gebeten, mit mir in einem Video-Hangout darüber nachzudenken.
Wir haben unsere Zeit damit verbracht, uns mit den Grundlagen von CSS Grid zu beschäftigen, und wir haben gelernt, dass es viel weniger beängstigend ist, damit zu beginnen, als wir beide erwartet hatten. Wir beginnen mit einem einfachen Beispiel und gehen dann die CSS-Grid-Eigenschaften durch, um zu erfahren, welche anderen Dinge es verarbeiten kann, ohne zu weit im Unkraut zu sein.
Hier sind einige Ressourcen, die wir in unserem Chat erwähnt haben und auf die es sich zu verlinken lohnt:
- Ein vollständiger Leitfaden für Grid - Ein umfassender Überblick über CSS Grid, einschließlich seiner Eigenschaften und eines Glossars wichtiger Begriffe und Konzepte.
- CodePen-Demo - Dies ist das einfache Beispiel, mit dem wir im Video begonnen und im weiteren Verlauf weiterentwickelt haben.
- CSS Grid und Grid Highlighter - Dieses Tool wurde gegen Ende erwähnt und bietet eine Möglichkeit, das Grid-Layout mit Firefox DevTools zu visualisieren.