CSS-Tutorialcode: Bilder flexibel anordnen mit CSS Grid
Hübsch gruppierte Bilder machen Websites einfach attraktiver. Denis Potschien erklärt, wie selbst CSS-Einsteiger mit CSS Grid schnell abwechslungsreiche Galerien gestalten können. Hier geht’s zum Tutorial-Code.
Zusammen mit unserem Step-by-Step-Workshop in PAGE 07.2019 können Sie das Tutorial Schritt für Schritt nachvollziehen. Wir wünschen viel Spaß beim Tüfteln und Coden!
Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit CSS Flexbox perfekt realisieren. CSS Flexbox ermöglicht es zwar, die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare als für verschachtelte Strukturen an. Gerade Letzteres geht mit CSS Grid wesentlich leichter.
In PAGE 07.2019 erläutern wir Schritt für Schritt, wie Sie mit CSS Grid relativ unaufwendig eine responsive Galerie gestalten, deren Bilder sich bei Klick vergrößern. CSS Grid ist eine vielseitige Gestaltungstechnik, mit der man nicht nur klassische Bereiche wie Header, Footer, Navigation und Inhalt frei auf einem Webseitenraster platzieren, sondern auch Bilder individuell in anspruchsvollen Galerien anordnen kann.
Das Tutorial eignet sich als Fingerübung für alle, die über grundlegende Kenntnisse in HTML und CSS verfügen und bereits einfache Seiten und Layouts erstellen können. Hier geht’s in unseren Shop zu PAGE 07.2019.
[8492]
Dieser Beitrag wurde erstmalig am 29.05.2019 veröffentlicht.
Das könnte Sie auch interessieren
