Flexbox, nebo Grid?

Teď znáte dva způsoby, jak skládat prvky. Kdy použít který?

• Flexbox skládá prvky v jednom směru: do řady, nebo do sloupce. Velikosti určuje obsah: každá položka zabere tolik místa, kolik potřebuje, a volné místo můžeme rozdělit pomocí justify-content nebo flex: 1. Hodí se pro řadu odkazů nebo tlačítek nebo pro nadpis s odkazem vedle něj.
• Grid skládá prvky ve dvou směrech zároveň: do řádků a sloupců. Strukturu určuje kontejner: nejdřív nakreslíme sloupce nebo oblasti a pak do nich umístíme položky. Hodí se pro galerie, karty a rozvržení celé stránky.

Karty bychom mohli skládat i flexboxem s flex-wrap. Jenže každý řádek flex kontejneru se skládá zvlášť: když karty roztáhneme pomocí flex-grow: 1, karty v kratším posledním řádku budou širší než ty nad nimi. V mřížce zůstane každá karta ve svém sloupci.

Oba způsoby se často kombinují: mřížka pro rozvržení stránky, flexbox pro menší části uvnitř. Položka mřížky přitom může být zároveň flex kontejnerem a naopak.

Dobrým příkladem je naše zápatí. Je to položka mřížky (je v oblasti zapati) a uvnitř má dva prvky, které mají být vedle sebe: zdroj a odkaz zpět nahoru. To je jeden směr, a tedy práce pro flexbox.