Grid

Teď karty. V kurzu CSS jste karty skládali do mřížky pomocí display: grid a grid-template-columns. V Tailwindu mřížku zapne třída grid a sloupce nastaví třídy grid-cols-*:

.grid {
	display: grid;
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

Číslo ve třídě je počet sloupců: grid-cols-3 vytvoří tři sloupce, grid-cols-4 čtyři a tak dále, funguje jakékoli číslo. Sloupce jsou vždy stejně široké. Každý dostane jeden podíl místa (1fr, jak už znáte) a minmax(0, 1fr) znamená, že sloupec smí být i užší než jeho obsah: dlouhé slovo v jedné kartě tak její sloupec nerozšíří.

Mezery mezi řádky a sloupci nastavují stejné třídy jako u flexboxu: gap-*, nebo zvlášť gap-x-* a gap-y-*.

Potřebujete sloupce různé šířky? Napište je do hranatých závorek, stejně jako libovolné hodnoty, které znáte (w-[350px]), a místo každé mezery použijte podtržítko: grid-cols-[12rem_1fr] vytvoří sloupec široký 12rem a druhý, který zabere zbytek.