Layout

Grid

Layout v řádcích i sloupcích najednou. Nakreslíte sloupce a prvky se do nich samy rozmístí.

Postavíme mozaiku výletů s jednou velkou dlaždicí. V náhledu vidíte, kam se dostaneme.

Začátek

Devět dlaždic pod sebou

Devět blokových div v jednom wrapperu .grid. Zatím se řadí pod sebe přes celou šířku.

První dlaždice má navíc třídu big a jinou barvu. Za chvíli ji zvětšíme.

Vlastnost · 1

Sloupce grid-template-columns

Na wrapperu zapneme grid a nakreslíme tři sloupce po 200 px. Dlaždice se do nich rozmístí samy, zleva doprava a po řádcích.

Kolik hodnot, tolik sloupců. Řádky jsme nekreslili: vzniknou samy, kolik je jich potřeba.

Vlastnost · 2

fr

Vpravo zbylo volné místo. Jednotka fr (fraction, díl) rozdělí dostupnou šířku. Tři sloupce po 1fr = každý dostane třetinu.

2fr 1fr 1fr by dal prvnímu sloupci polovinu a ostatním po čtvrtině. Jednotky se dají míchat: 200px 1fr je pevný sidebar a pružný obsah.

Vlastnost · 3

Mezery gap

Stejně jako ve flexboxu. Mezera mezi sloupci i řádky, ale ne na okrajích gridu.

Jiná mezera mezi řádky a sloupci: gap: 24px 16px (nejdřív řádky, pak sloupce).

Vlastnost · 4

Opakování repeat()

Psát 1fr čtyřikrát za sebou je zdlouhavé. repeat(4, 1fr) znamená totéž: čtyři stejné sloupce.

Devět dlaždic ve čtyřech sloupcích: dva plné řádky a jedna dlaždice osamocená na třetím. Hned to spravíme.

Vlastnost · 5

Přes víc buněk span

Velká dlaždice zabere dva sloupce a dva řádky, tedy čtyři buňky. Ostatní se kolem ní naskládají samy a grid se přesně zaplní.

Místo span lze zadat přesné čáry gridu: grid-column: 1 / 3 = od první do třetí čáry. 1 / -1 znamená přes celou šířku.

Responzivita

Na telefonu dva sloupce

Čtyři sloupce na telefonu jsou nudle. Na úzké obrazovce nakreslíme jen dva. Velká dlaždice pak vyplní celý řádek.

Mění se jen počet sloupců. Dlaždice ani jejich span neměníme, grid je přeskládá sám.

Vlastnost · 6

Bez @media: minmax()

Grid umí počet sloupců spočítat sám. Řekneme mu: sloupce nejméně 140 px, jinak stejně široké, a vejde se jich kolik se vejde. Pravidlo @media pak smažeme.

Na telefonu vyjdou dva sloupce, na desktopu čtyři a na širokém monitoru ještě víc. Přepněte náhled a vyzkoušejte. minmax(140px, 1fr) = nejméně 140 px, nejvíc jeden díl.

Shrnutí

Nakreslit sloupce, zbytek nechat gridu

Ano

• grid-template-columns s jednotkou fr
• repeat() pro stejné sloupce
• gap pro mezery
• span pro větší prvky
• repeat(auto-fit, minmax(…)) pro grid bez @media

Ne

• sloupce v pevných pixelech, které se nevejdou na telefon
• grid na jednu řadu tlačítek, tam stačí flexbox

Pojmenované oblasti gridu (grid-template-areas) jsou v lekci Pojmenované oblasti.

Další lekce: Pozicování →