Dieser Artikel zeigt dir, wie du einfach mit etwas CSS dein eigenes Grid erstellen kannst, welches flexibel auf die Größe deines Browsers reagiert.

Hintergrund

In meinem Hobbyprojekt von mir, möchte ich meine bisher erworbenen Filme erfassen und anzeigen. Der Film soll mit seinem Cover und Titel angezeigt werden.
Wenn ich allerdings eine typische Tabelle mit TR und TDs erzeuge, müsste ich immer umrechnen, wie viele Einträge pro Zeile passen und ggfs. auf eine Größenänderung des Browserfensters reagieren.

Ansatz

Daraufhin habe ich mir überlegt, dass ich eine Liste nutzen könnte. Diese Liste muss allerdings horizontal aufgebaut werden. Wenn die Liste zu lang ist, führt der Browser die Liste eine Zeile tiefer weiter.

Sehen wir uns den CSS-Code dazu an:

Mit diesem Code wird die Liste as Grid angezeigt. Alle Items in einer Zeile sind oben auf der gleichen Höhe. Den Rand habe ich hinzugefügt, um die einzelnen Items optisch voneinander abzutrennen.
Die Lösung mit max-width gefällt mir persönlich nicht. Absolute Größen gehen oftmals schief. Allerdings liegen die Bilder in einer bestimmten Größe vor (z.B. 150×200 px). Anhand der Bildgröße habe ich die max-width definiert.

Der HTML-Code der Liste sieht folgendermaßen aus:

Ergebnis

Das Ergebnis kann sich sehen lassen:

Was haltet ihr von dieser Lösung? Ich freue mich auf eure Kommentare und Hinweise.

CSS – Liste als Grid darstellen
Markiert in:     

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.