Mezery mezi buňkami

Karty se navzájem dotýkají. Mohli bychom každé kartě nastavit okraj, ale existuje lepší způsob, který znáte z flexboxu: vlastnost gap (mezera). Ta nastavuje mezery mezi řádky a sloupci mřížky.

.karty {
	gap: 1rem;
}

Mezery jsou jen mezi buňkami, nikdy na krajích mřížky, takže krajní karty zůstanou zarovnané se zbytkem stránky. Prohlížeč mezery od šířky odečte jako první a sloupce s jednotkou fr si rozdělí to, co zbude.

Když napíšeme dvě hodnoty, první je mezera mezi řádky a druhá mezera mezi sloupci: gap: 2rem 1rem. Každou z nich můžeme nastavit i zvlášť, a to vlastnostmi row-gap (mezera mezi řádky) a column-gap (mezera mezi sloupci).