Nachbildung des GitHub-Beitragsdiagramms mit CSS Grid Layout

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ire Aderinokun macht sich daran, das GitHub-Beitragsdiagramm zu erstellen – das ist die Tabelle mit vielen grünen Quadraten, die anzeigen, wie viel Sie zu einem Projekt beigetragen haben – mit CSS Grid.

Wie ich beim Arbeiten mit CSS Grid Layout immer feststelle, lande ich mit weitaus weniger CSS, als ich es mit fast jeder anderen Methode hätte. In diesem Fall war der Layout-bezogene Teil meines CSS mit weniger als 30 Zeilen und nur 15 Deklarationen abgeschlossen!

Ich freue mich so über solche Beiträge, weil sie zeigen, wie viel Spaß CSS Grid machen kann. Ebenso hat Jules Forrest eine Reihe brillanter Experimente in diesem Bereich durchgeführt, wo sie komplexe Print-Layouts neu interpretiert oder sogar seltsame Menüdesigns.

Direkter Link →