CSS Grid

Moderní CSS nástroj

Pokud se zajímáte o nové technologie, tak jste už pravděpodobně slyšeli o CSS Gridu. Ten exceluje v rozdělení stránky na jednotlivé části a dále v určování jejich velikosti a pozice.

Úvod

CSS Grid je 2 dimenzionální systém, což znamená, že můžete kontrolovat jak sloupce tak řádky. Narozdíl od Flexboxu, který má pouze jednu dimenzi. Použití CSS pravidel je možné jak v elementu rodiče, tak i v potomku.

Začínáme

Na začátek se musí deklarovat container element s display: grid, nastaví se sloupec a řádek s grid-template-columns a grid template-rows, čímž se zvolí počet sloupců a řádků v gridu(veliksot může být v px, nebo můžeme nastavit auto), dále se může nastavit jeho potomkům grid-column a grid-row, což nastaví, kde se daný element má zobrazit ve sloupci. Tímto se může snadně vytvořit navbar, sidebar, main content, footer a tak dále.

Podpora

K březnu 2017, má mnoho prohlížečů podporu CSS Gridu jako: Chrome, Firefox, Safari, nebo Opera. IE 10 a 11 ho podporují, ale pouze starou verzi, se starou syntaxí.

Jednoduchý příklad naleznete zde

Jaka vidíte, s jednotlivými elementy se dá pracovat jednodušše a dají se upravovat výšky i umístění. Tím pádem nám CSS Grid nabízí obrovské možnost. Tool je to ještě mladý, ale s velkým potenciálem.

Závěr

Css grid je moderní, velice užitečný nástroj. Ideálně může nahradit knihovny jako Bulma, nebo Bootstrap. Dá se využít i na responzivní design pomocí pokročilejších, prvků jako auto-fill nebo auto-fit. Pokud vás tento nástroj zaujal, zde najdete kompletní tutoriál(pouze v angličtině). Jediná nevýhoda je, zatím slabší podpora ze strany Edge(nečekaně). Doufám, že vám přijde Css grid stejně progresivní jako mě. Have fun coding.

Komentáře nejsou povoleny.