Filmkarten im Grid

Die drei Filme sollen nebeneinander stehen, in drei gleich breiten Spalten. Das ist eine Aufgabe für CSS Grid: .filme, das div um die Karten, wird zum Grid-Container, und die Karten werden zu seinen Items. Drei Spalten mit je einem Bruchteil, 1fr 1fr 1fr (oder repeat(3, 1fr)), teilen sich seine Breite gleichmäßig, und gap setzt 24 Pixel zwischen sie.

Dann bekommt jede Karte das Aussehen einer Karte: Padding, einen dünnen Rahmen in hellem Beige (#e5d9c5), abgerundete Ecken und einen weißen Hintergrund, damit sie sich von der cremefarbenen Seite abhebt.

Schließlich ist die Zeile mit Genre und Länge weniger wichtig als der Name und die Beschreibung des Films, deshalb wird sie kleiner und grau (#6b7280).

Wenn deine Vorschau schmal ist, werden die Karten ziemlich gequetscht: Drei Spalten sind für einen Computerbildschirm gedacht. Wie du das Layout für schmale Bildschirme änderst, lernst du später im Tailwind-Kurs.