Das CSS Grid Layout Module ist ideal für komplexere Webdesigns. Denis Potschien zeigt Step by Step, wie auch CSS-Einsteiger damit abwechslungsreiche Bildergalerien gestalten können
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.
Doch komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit CSS Flexbox perfekt realisieren. Denn 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.
Bilder flexibel anordnen mit CSS Grid
In diesem Tutorial werden Sie mit relativ wenig Aufwand eine tolle responsive Galerie gestalten, deren Bilder sich bei Klick sogar vergrößern, und dabei hoffentlich feststellen, dass CSS Grid eine vielseitige Gestaltungstechnik ist, 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. Dieses 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. Los geht’s.
1. Tools auswählen
Bevor Sie sich ans Weblayout machen, stellen Sie Ihr Handwerkszeug zusammen. Sie benötigen einen HTML-Editor wie Adobe Dreamweaver, Notepad++, TextWrangler, BBEdit oder Ähnliche. Wer etwas Unterstützung beim Coden benötigt, ist mit Dreamweaver gut beraten; ansonsten tut es jeder andere Editor auch. Sie können aber auch die Chrome DevTools oder die Firefox Tools für Webentwickler nutzen. Laden Sie sich unseren CSS-Tutorialcode herunter. Außerdem benötigen Sie Papier und einen Stift.
