{%hackmd anYwyN--TziyASUWcqP-Gw %} # Tvořím web A–Z 2: lekce 03 <span>7. 4. 2021 | 18:00 - 20:00 | Praha</span> Lekce 03 - CSS Grid Jan Čuma --- # Co to je - CSS Grid je sada vlastností pro tvorbu layoutu vsazeného do pravidelné mřížky. - síla gridu je v tom, že můžeme mřížku definovat v obou směrech – v řádcích i sloupcích  --- # Proč když existuje flexbox - **Grid - dvourozměrné layouty – svislá i vodorovná osa** - **Flexbox - jednosměrný lazout - svislá nebo vodorovná osa** - na rozdíl od flexboxu je vhodnější pro celostránkové a komplexnější layouty - grid se používá pro layout celé stránky, flexbox pro menší komponenty - grid je silnější v responzivním zobrazení = méně media queries --- # Co je to vlastně grid (mřížka)? - do mřížky se už dlouho sází knihy a většina tiskovin - původně se používal tabulkový layout, který trpěl nedostatky - pokud znáte Bootstrap, jedná se nástroj zabudovaný přímo v prohlížeči - můžete si to představit jako buňky v excelu --- # Co si dneska ukážeme - <code>grid</code> - <code>grid-template-columns</code> - <code>grid-template-rows</code> - <code>grid-area</code> - <code>grid-template-areas</code> - <code>grid-auto-flow</code> - <code>gap</code> --- # <code>display: grid</code> je základ - samo o sobě nic nedělá - potřebujeme další pravidla gridu ```css= .container { display: grid; } ``` --- # grid-template-columns - ovlivňuje množství a šířku sloupců - množství hodnot = množství sloupců - možné jednotky: fr, px, auto, procenta, ... - nejčastěji používanou dynamickou jednotkou je <code>fr</code> - 1fr = jedna volná jednotka/buňka - auto = užitečné pro vyplnění prázdého zbývajícího místa ```css= .container { grid-template-columns: 1fr 2fr 1fr; } ``` --- # grid-template-rows - ovlivňuje množství výšku řádku - množství hodnot = množství řádků - jendotky stejné jako u <code>grid-template-columns</code> ```css= .container { grid-template-rows: 2fr 2fr 1fr; } ``` --- # grid-column-start - určuje v jakém sloupci v rámci gridu bude umístěn začátek elementu ```css= .element { grid-column-start: 2; } ``` --- # grid-column-end - určuje v kolika sloupcích bude element umístěn - jako hodnotu můžeme použít číslo sloupce, nebo klíčové slovo <code>span</code> ```css= .element { grid-column-end: 2; } ``` ```css= .element { /* roztáhni se přes dva sloupce */ grid-column-end: span 2; } ``` --- # grid-row-start - určuje v jakém řádku v rámci gridu bude umístěn začátek elementu ```css= .element { grid-row-start: 2; } ``` --- # grid-row-end - určuje v kolika řádcích bude element umístěn ```css= .element { grid-row-end: 2; } ``` --- # repeat() - funkce pro definici opakujících se zápisů v gridu - <code>grid-template-columns: repeat(4, 1fr);</code> - vygeneruje grid se čtyřmi sloupci velikosti <code>1fr</code> - rovná se zápisu <code>grid-template-columns: 1fr 1fr 1fr 1fr;</code> - <code>grid-template-columns: repeat(2, minmax(100px, 1fr))</code> - vygeneruje grid s dvěma sloupci minimální šířkou <code>100px</code> a maximální šířkou <code>1fr</code> - rovná se zápisu <code>grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);</code> - zápisů existuje ještě mnoho méně uživaných a složitějších a pro doplnění přidávám odkaz na dokumentaci [MND](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()) --- # minmax() - funkce pro dynamickou definici šířky nebo výšky - <code>minmax(100px, 200px)</code> - minimální velikost buňky je <code>100px</code> a maximální <code>200px</code> - <code>minmax(100px, 1fr)</code> - minimální velikost buňky je <code>100px</code>, jinak zabírá 1 díl v gridu - <code>minmax(100px, max-content)</code> - minimální velikost buňky je <code>100px</code>, ale nikdy nepřesáhne šířku obsahu - <code>minmax(min-content, 100px)</code> - nikdy nesmí být menší než obsah a zároveň maximálně <code>100px</code> velká - lze uvést i parametr <code>auto</code>, ale nedoporučuje se top pro zmatečnost implementace v prohlížečích --- # Negativní hodnoty - pokud chceme, aby element zabíral celou šířku / výšku kontejneru, můžeme použít negativní hodnoty ```css= .element { grid-column-start: 1; grid-column-end: -1; } ``` --- # Zkratky 1/2 - <code>grid-column</code> - kombinuje <code>grid-column-start</code> a <code>grid-column-end</code> ```css= .element { grid-column: 1 / -1; /* eq */ grid-column-start: 1; grid-column-end: -1; } ``` - <code>grid-area</code> - kombinuje předchozí 4 vlastnosti ```css= .element { grid-area: 2 / 1 / span 2 / span 3; /* eq */ grid-row-start: 2; grid-column-start: 1; grid-row-end: span 2; grid-column-end: span 3; } ``` --- # Zkratky 2/2 - <code>grid-area</code> - kombinuje předchozí 4 vlastnosti ```css= .element { grid-area: 2 / 1 / span 2 / span 3; /* eq */ grid-row-start: 2; grid-column-start: 1; grid-row-end: span 2; grid-column-end: span 3; } ``` --- # gap - používá se pro mezery mezi řádky a sloupci - uvádí se vždy dvě hodnoty ```css= .container { row-gap: 20%; column-gap: 20px; /* eq */ gap: 20% 20px; } ``` --- # grid-template-areas - slouží k vyplnění mřížky pojmenovanými elementy - zapisuje se jako text do uvozovek po řádcích a sloupcích ```css= .container { grid-template-areas: "nav nav nav" "content content ." "footer footer footer"; } ``` --- # grid-area - zkratka pro více hodnot - záměrně se učíme rovnou zkratku - používá se u elementu uvnitř gridu - nějčastěji se používá pro pojmenování elementu ```css= nav { grid-area: nav; } .content { grid-area: content; } footer { grid-area: footer; } ``` --- # Hřiště pro grid [[Hřiště pro grid | https://grid.layoutit.com/]](https://grid.layoutit.com/) [[Grid garden | https://cssgridgarden.com//]](https://cssgridgarden.com//) --- # Konec <span>7. 4. 2021 | 18:00 - 20:00 | Praha</span> Lekce 03 - CSS Grid Jan Čuma