Web-Design mit Adi Prinz
← Zurück

Cards1 – Projektübersicht

Bild, Titel, Kurztext und Footer – identische Inhalte in vier Layout-Techniken (Classic, Flexbox, Grid, Bootstrap 5.3).

Gemeinsamkeiten: Mobile-first, konsistente Abstände und klare Semantik. Die Varianten unterscheiden sich nur in der Layout-Technik.

Bootstrap 5.3

Layout mit Grid und Utilities – schneller Aufbau mit wenig eigenem CSS.

Flexbox

Flex-Raster mit automatischem Umbruch und gleich hohen Cards ohne JavaScript.

Grid

CSS Grid mit klar definierten Spalten und Reihen für ein strukturiertes Layout.

Classic

Floats und Prozentbreiten – zeigt die Grenzen klassischer Techniken. Gleich hohe Cards werden hier zusätzlich per JavaScript umgesetzt.