CSS - Liste als Grid darstellen

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 ggf. 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:

.list-as-grid {
  /* Auflistungszeichen wie Strich oder Punkt deaktivieren */
  list-style-type: none;
}

.list-as-grid > li {
  /* inline-grid zeigt die Liste als grid an */
  display: inline-grid;
  /* Diese Attribute sollen die Darstellung verbessern */
  margin: 0.35em;
  border: black dotted 1px;
  padding: 0.5em;
}

.list-as-grid > li > p {
  /* Der Text soll ebenfalls zentriert sein und nicht größer als ein Item der Liste */
  margin-top: 0.3em;
  text-align: center;
  max-width: 150px;
}

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:

<ul class="list-as-grid">
  <li><img src="/images/image1.jpg">
    <p>Item 1</p></li>
  <li><img src="/images/image1.jpg">
    <p>Item 2</p></li>
  <!-- Weitere Elemente-->
</ul>

Ergebnis

Das Ergebnis kann sich sehen lassen:

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