Moderní rozložení
grid

WBA

Bc. Matěj Cajthaml ©

Smíchovská střední průmyslová
škola a gymnázium

icon

Transformace

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

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í

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

Děkuji za pozornost!

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