CSS-Workshop: 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.

●Webdesigner erstellen nicht erst seit Einführung von CSS Grid Gestaltungsraster. In den 1990er Jahren versuchte man, dem Problem fehlender Raster mit HTML-Tabellen beizukommen, knüpfte damit aber die Gestaltung direkt an den HTML-Code, was diesen nicht nur ungeheuer komplex machte, sondern auch spätere Änderungen erschwerte.

Dann entstanden erste CSS-Frameworks wie Bootstrap. Seither haben Webentwickler alles Mögliche unternommen (die CSS-Eigenschaft float, Flexbox und JavaScript-Hacks), um Webseiten-Layouts in der Programmierung so umzusetzen, wie sie es gestalterisch für sinnvoll hielten.

Hier gibt’s den Code zum Tutorial in PAGE 07.2019:

Laden Sie sich den Projektordner mit Code und Beispielbild herunter! 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]

Schlagworte: UX Design, Webdesign, Webfonts