Karty filmů v mřížce

Tři filmy mají stát vedle sebe ve třech stejně širokých sloupcích. To je práce pro CSS Grid: z .films, tedy z prvku div kolem karet, bude kontejner mřížky a z karet jeho položky. Tři sloupce po jednom podílu, 1fr 1fr 1fr (nebo repeat(3, 1fr)), si rozdělí jeho šířku rovným dílem a gap mezi ně vloží 24 pixelů.

Pak každá karta dostane vzhled karty: polstrování, tenký rámeček ve světle béžové (#e5d9c5), zaoblené rohy a bílé pozadí, aby na krémové stránce vynikla.

A nakonec: řádek se žánrem a délkou je méně důležitý než název a popis filmu, a tak bude menší a šedý (#6b7280).

Pokud máte úzký náhled, budou karty dost natěsnané: tři sloupce jsou dělané pro obrazovku počítače. Jak rozvržení na úzkých obrazovkách změnit, se naučíte později v kurzu Tailwindu.