Vlastnost transform

• nová vlastnost sloužící k úpravě prvků
• otáčení, natáhnutí, ...

Vlastnost transform

Vlastnost transform

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Grid

• moderní způsob rozložení
• velmi podobné tabulkám - moderní tabulky
• podporují responzivitu a jednoduše se prohazují prvky

Flexbox se nehodí na vícedimenzionální rozložení.

Flexbox je navržen na jednu dimenzi a flex-wrap způsobuje chaos.

Grid oproti flexboxu umí pracovat ve dvou dimenzích (řádcích a sloupích) perfektně.

Flexbox a grid umí spolu velmi dobře spolupracovat.

Grid je komplikovanější než flexbox a hodí se na méně věcí.

Proto si ukážeme pouze nutné základy.

Hlavní krása gridu je to, že můžeme pomocí CSS měnit polohu jednotlivých položek v gridu.

Kontejner

• = obal okolo prvků
• = container
• určuje jak se prvky budou zarovnávat (uspořádat)
• prvky se vždy zobrazují jako blok
• pro nás blok na kterém grid zapneme
• rozdělujeme na řádky (rows) a sloupce (columns)

Předměty

• = jednotlivý prvek uvnitř gridu
• = dítě, child, item, prvek
• je umístěn na nějakém řádku a sloupci
• prvky se do kontejneru vkládají podle toho, jak jsou v HTML a vždy jdou podle řádků

Grid zapneme pomocí display: grid;

Každý řádek a sloupec má přesně stanovenou šířku (resp. výšku).

Buď automaticky nebo pomocí vlastnosti grid-template-columns (resp. grid-template-rows).

Na mezery mezi sloupci a řádky můžeme použít vlastnost gap.

Samozřejmě i row-gap i column-gap.

Základní grid

Co se stane, když bude více prvků, než je předefinováno?

A co se stane, když bude více prvků, než je předefinováno a nastavím pouze řádky nebo sloupce?

Grid s auto

Jednotka fr

• fraction
• reprezentuje jednen zlomek - část gridu
• automaticky vypočítá místo, které je potřeba
• např.: grid-template-columns: 4fr 1fr 2fr

Využití fr

Zarovnání položek uvnitř gridu

• prvky můžeme zarovnávat jako ve flexu
• prvky se zarovnávají však v místě, které od gridu dostali
• align-items
• justify-items: nyní má i hodnotu stretch a další

Zarovnání položek uvnitř gridu

Zjistěte, co dělají vlastnosti justify-content a align-content na gridu.

Opakování - repeat

• způsob zkrácení zápisu definic - šablon
• repeat(3, 1fr) / repeat(6, 40px)
• 30px repeat(2, 1fr) 30px repeat(2, auto)

Minimální a maximální velikosti - minmax

• místo zápisu šířky (resp. výšky) sloupců (resp. řádků)
• definuje dvě hodnoty a to nejmenší a největší, kterou může daný sloupec / řádek nabývat
• minmax(40px, auto) / minmax(40px, 100px)
• repeat(4, minmax(40px, 100px))

Natáhnutí položek

• často potřebujeme položky v gridu roztahovat na více sloupců či řádek
• obdoba colspan a rowspan
• grid-row-start & grid-row-end
• grid-column-start & grid-column-end
• nebo grid-row & grid-column

Natáhnutí položek

Rozložení 1

Práce

Rozložení 2

Práce

Příští hodinu test

https://ssps.cajthaml.eu/2-wba/selfstudy/prubezne-opakovani