In einem früheren Artikel habe ich die Fähigkeit von CSS Grid untersucht, komplexe Layouts mit seinen Auto-Placement-Fähigkeiten zu erstellen. Ich ging einen Schritt weiter in einem anderen Artikel, der einen Zoom-Hover-Effekt zu Bildern in einem Grid-Layout hinzufügte ...
Das Erstellen eines Bilderraster ist dank CSS Grid einfach. Aber das Gitter dazu zu bringen, schicke Dinge zu tun, *nachdem* die Bilder platziert wurden, kann schwierig sein.
Sagen wir, Sie möchten einen schicken Hover-Effekt hinzufügen zu ...
Dave Rupert mit etwas modernem CSS-Zauber, das sich mit einem dieser klassischen Rätsel befasst: Was passiert, wenn die CSS für eine Komponente den Inhalt, den wir ihr zumuten, nicht verarbeiten kann?
Die spezifische Situation ist, wenn ein Layout-Grid erwartet ...
Bei der Arbeit mit CSS Grid ist das Erste, was zu tun ist, display: grid auf das Element anzuwenden, das zu einem Grid-Container werden soll. Dann definieren wir das Grid explizit durch eine Kombination von grid-template-columns, grid-template-rows...
