Akkordeon-Zeilen in CSS Grid

Avatar of Chris Coyier
Chris Coyier am

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

Ich wette, grid-template-columns wird etwa 10 Mal häufiger verwendet als grid-template-rows, aber vielleicht hat jeder etwas verpasst. Eric Meyer wirft eine Reihe von Reihenlinien in das Hauptlayout-Grid seiner Website wie folgt ein.

grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content);

So sind sie für Sie da, wenn Sie sie brauchen

Ich mag dieses Muster. Es gefällt mir, zwei Zeilensätze zu haben, bei denen sich einzelne Zeilen wie ein Akkordeon öffnen, um bei Bedarf Inhalte aufzunehmen, und auf null Höhe zusammenklappen, wenn nicht, mit einer „leeren“ Zeile zwischen den Sätzen, die sie auseinanderdrückt. Es ist flexibel und erlaubt mir sogar, weitere Zeilen zu den Sätzen hinzuzufügen, ohne alle meine Layout-Stile neu schreiben zu müssen.

Direkter Link →