{%hackmd anYwyN--TziyASUWcqP-Gw %} # Tvořím web A–Z 2: lekce 04 <span>14. 4. 2021 | 18:00 - 20:00 | Praha</span> Lekce 04 - CSS Grid Jan Čuma --- # Zarovnání v gridu - hodně se podobá zarovnání ve flex-boxu - kdo si pamatuje nebo zná flexbox má výhodu - standard u většiny prohlížečů - používá se <code>align-items</code>, <code>justify-items</code>, <code>place-items</code>, <code>justify-content</code>, <code>align-content</code>, <code>place-content</code>, <code>align-self</code>, <code>justify-self</code> --- # align-items, justify-items - <code>align-items</code> - jedná se o vertikální zarovnání - <code>justify-items</code> - jedná se o horizontální zarovnání - zarovnává všechny koponenty v **buňce** gridu - týká se všech položek v gridu - deklarace se uvádí u grid containeru - může nabývat následujících hodnot: - <code>start</code> = nahoru | doleva - <code>end</code> = dolu | doprava - <code>center</code> = doprostřed - <code>stretch</code> = roztáhnout do buňky --- # place-items - zkratka pro obě předchozí - zarovnává v obou osách - zápis jednoduchý, stejný pro obě osy - <code>place-items: center;</code> - zápis složený, různý pro každou osu - <code>place-items: |align-items| |justify-items|;</code> - <code>place-items: center stretch;</code> --- # align-content, justify-content - určuje pozici celého gridu v rámci kontejneru - vhodné v případech, kdy je obsah gridu menší než kontejner, na kterém je grid aplikován - lze využít pokud používáme nedynamické jednotky jako třeba <code>px</code> - zarovnáváme jednolivé řádky a sloupce podle deklarace - <code>align-content</code> - vertikální osa - <code>justify-content</code> - horizontální osa - může nabývat následujících hodnot: - <code>start</code> = nahoře | vlevo - <code>end</code> = dole | vpravo - <code>center</code> = uprostřed - <code>stretch</code> = roztažený - <code>space-around</code> = místo kolem - <code>space-between</code> = místo mezi - <code>space-evenly</code> = stejné místo kolem i mezi --- # place-content - zkratka pro obě předchozí - zarovnává v obou osách - zápis jednoduchý, stejný pro obě osy - <code>place-content: center;</code> - zápis složený, různý pro každou osu - <code>place-content: |align-content| |justify-content|;</code> - <code>place-content: center stretch;</code> --- # align-self, justify-self - <code>align-self</code> - jedná se o vertikální zarovnání - <code>justify-self</code> - jedná se o horizontální zarovnání - zarovnává komponentu uvnitř buňky gridu - týká se vždy jednotlivé komponenty uvnitř buňky - deklarace se uvádí u grid komponenty - může nabývat následujících hodnot: - <code>start</code> = nahoru | doleva - <code>end</code> = dolu | doprava - <code>center</code> = doprostřed - <code>stretch</code> = roztáhnout do buňky --- # place-self - zkratka pro obě předchozí - zarovnává v obou osách - zápis jednoduchý, stejný pro obě osy - <code>place-self: center;</code> - zápis složený, různý pro každou osu - <code>place-self: |align-self| |justify-self|;</code> - <code>place-self: center stretch;</code> --- # grid-auto-rows - specifikuje velikost implicitně vytvořených řad ```css= .container { /* každá řada má výšku 50px */ grid-auto-rows: 50px; /* každá řada má min výšku 10px max podle obsahu */ grid-auto-rows: minmax(10px, auto); } ``` --- # grid-auto-flow - určuje, jak bude fungovat algoritmus pro umísťování prvků do mřížky - může nabývyat následujících hodnot - <code>row</code> - vykreslení po řádcích (default) - <code>column</code> - vykreslení po sloupcích - <code>dense</code> - vykreslení po řádcích, s vyplněním prázdných míst - <code>column dense</code> - vykreslení po sloupcích, s vyplněním prázdných míst ```css= .container { /* pokud chceme nastavit šířku impl. vytvořených sloupců, zkombinujeme následující hodnoty */ grid-auto-flow: column; grid-auto-columns: 60px; } ``` --- # Responzivita 1/2 - lze jí dosáhnout pomocí <code>media-queries</code> - nebo ještě doplněním funkce <code>repeat()</code> - <code>auto-fill</code> a <code>auto-fit</code> - <code>auto-fill</code> doplňuje neviditelné sloupce nebo řádky pro vyplnění containeru - <code>auto-fit</code> upravuje dynamicky šířku sloupců nebo řádků pro vyplnění containeru - <code>fit-content</code> nastaví maximální šířku sloupce. Pokud je obsah širší dojde k jeho zalomení. Velice podobné chování jako funkce <code>minmax()</code> s tím rozdílem, že <code>minmax()</code> má tendence vždy zabírat maximální možné místo --- # Responzivita 2/2 <img src="https://www.vzhurudolu.cz/prirucka-content/dist/images/medium/auto-fill-fit.png" style="max-height: 180vh;" /> --- # Procvičování [CSS Grid Garden](http://cssgridgarden.com/#cs) --- # Druhá stage domácího úkolu 1. přidejte do vaší stránky grid 2. využijte alespoň 10 deklarací css gridu, které jsme si ukázali (mohou se opakovat) 3. použijte funkci <code>repeat()</code> i <code>minmax()</code> 4. použijte alespoň 2 ze zarovnávacích deklarací z dnešní lekce 5. dosáhněte responzivního vzhledu vaší stránky buď pomocí css gridu nebo <code>media-queries</code> --- # Konec <span>14. 4. 2021 | 18:00 - 20:00 | Praha</span> Lekce 04 - CSS Grid Jan Čuma