Shrnutí

V této lekci jsme se naučili, že:

• CSS Grid skládá prvky do řádků a sloupců zároveň. Prvek s display: grid je kontejner mřížky a jeho děti jsou položky mřížky.
• Sloupce nastavuje vlastnost grid-template-columns: každá hodnota vytvoří jeden sloupec, například 200px 1fr. Řádky vznikají automaticky podle potřeby (nebo je nastaví grid-template-rows).
• Jednotka fr je jeden podíl volného místa: 1fr 1fr 1fr vytvoří tři stejně široké sloupce, které se přizpůsobí šířce kontejneru.
• repeat(3, 1fr) je kratší zápis 1fr 1fr 1fr.
• gap nastavuje mezery mezi řádky a sloupci (jen mezi buňkami, ne na krajích mřížky). Při dvou hodnotách je první pro řádky a druhá pro sloupce, zvlášť je nastaví row-gap a column-gap.
• Čáry mřížky se číslují od 1. Vlastnosti grid-column a grid-row určují, které sloupce a řádky položka zabírá: span 2 zabere dva, 1 / 3 všechno mezi čárami 1 a 3 a 1 / -1 všechny.
• grid-template-areas nakreslí rozvržení z pojmenovaných oblastí, jeden řetězec pro každý řádek, a grid-area umístí prvek do oblasti.
• Flexbox je pro jeden směr (řada, nebo sloupec), grid pro dva (řádky a sloupce). Často se kombinují: mřížka pro rozvržení stránky, flexbox pro části uvnitř.

V další lekci na vás čeká závěrečný projekt: sami navrhnete vzhled celé stránky a využijete všechno, co jste se naučili v kurzu CSS.