CSS grid

6. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Grid

Úvod

  • grid = moderní způsob rozložení
  • prakticky nahráda tabulek
  • rozdílný oproti flexu
  • podporovaný všude

Kontejner

  • = obal okolo prvků
  • = container
  • určuje jak se prvky budou zarovnávat
  • prvky se vždy zobrazují jako blok

Předměty

  • = jednotlivý prvek
  • = dítě, child, item, prvek

Sloupce / řádky

sloupce = cols či columns, řádky = rows

Jednotka fr

  • fr = zlomek místa
  • místa, které lze zabrat ve gridu

Definice sloupců

Opakování definice

Definice řádků

Mezery

Rozpětí

Zarovnání

Zarovnání

Zdroje

Flex & grid: dokument 17. - 24. hodina

Materiály na stránce

Shrnutí

Jak znáte jednotky?
K čemu slouží vlastnost text-align? Jaké jsou hodnoty?
K čemu slouží vlastnost box-shadow?
Jaké znáte typy transformací?
Jaký je rozdíl mezi inline a block?

Shrnutí

Co je to flex?
Jak poznáme hlavní a vedlejší osu ve flexu?
K čemu slouží vlastnost flex-grow?
K čemu slouží vlastnost flex-basis?
K čemu slouží reset CSS?

Shrnutí

Co je to grid?
K čemu slouží vlastnost gap?
Jak definujeme sloupce/řádky?
Jak nastavíme rozpětí předmětu?

Opakování rozložení

PRÁCE

https://ssps.cajthaml.eu/3-mvop-wbf/work/6-opakovani-flex

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/