Grid
Systém Grid je flexibilný spôsob vytvárania responzívnych rozvrhnutí(layoutov) rozdelením obrazovky na mriežku riadkov Rows a stĺpcov Cols. Grid je založený na flexboxe s rozložením rozdeleným na 12 stĺpcov s 5 responzívnymi breakpointami.
Prehľad funkcií
Responzivita: Grid umožňuje vytvárať responzívne rozvrhnutia (layouty), ktoré sa prispôsobujú rôznym veľkostiam a orientáciám obrazovky.
Nesting : Vývojári môžu vkladať viacero elementov wj-grid do seba a vytvárať tak zložitejšie rozvrhnutia. To umožňuje väčšiu flexibilitu pri usporiadaní obsahu.
Breakpointy: Systém mriežky Grid podporuje rôzne body zlomu pre rôzne veľkosti obrazoviek, ako sú telefóny, tablety a stolové počítače.
Odsadené stĺpce (Offset): Vývojári môžu stĺpce odsadiť a vytvoriť tak vizuálne rozdiely v rozložení. To je užitočné pri vytváraní návrhov s rozloženým alebo asymetrickým usporiadaním.
Automatické rozloženie: Grid poskytuje možnosti automatického prispôsobenia veľkosti stĺpcov na základe obsahu alebo dostupného priestoru. To môže pomôcť optimalizovať rozloženie pre rôzne scenáre.
Predvolené Breakpointy
V tabuľke nižšie nájdete predvolené breakpointy gridu.
Základné použitie
By default, columns will take up equal width inside of a row for all devices and screen sizes.
Veľkosť stĺpcov: auto
Nastavením size na auto sa stĺpec prispôsobuje šírke svojho obsahu a susedné stĺpce automaticky upravia svoju šírku tak, aby vyplnili zostávajúce miesto v riadku.
Špecifická veľkosť stĺpcov
Nastavením size na špecifickú veľkosť stĺpec zaberie určený počet stĺpcov riadku. Susedné stĺpce automaticky upravia svoju šírku tak, aby vyplnili zostávajúce miesto v riadku.
Responzívna veľkosť stĺpcov
Atribút size je možné nastaviť aj špecifickým breakpointom pridaním jeho prefixu. V tomto prípade sa veľkosť stĺpca upraví až po dosiahnutí nastaveného breakpointu.
Offset
Offset umožňuje vytvoriť prázdny priestor v layoute tým, že posunie daný stĺpec doprava. Atribút offset prevezme číselnú hodnotu, ktorá predstavuje počet stĺpcov, o ktoré sa má cieľový stĺpec posunúť.
Responzívny Offset
Pridaním breakpointu do offsetu sa posun stĺpca upraví až po dosiahnutí zvoleného breakpointu.
Order
Poradie stĺpcov je možné upravovať pridaním atribútu order a nastavením jeho hodnoty na pozíciu v mriežke, na ktorú má byť umiestnený.
Zarovnanie
Vertikálne Zarovnanie
Stĺpce je možné zarovnať vertikálne pomocou css tried wj-align-items-start, wj-align-items-center, wj-align-items-end.
Horizontálne Zarovnanie
Stĺpce je možné zarovnať horizontálne pomocou css tried wj-justify-content-start, wj-justify-content-center, wj-justify-content-end, wj-justify-content-between, wj-justify-content-around.
Atribúty a Vlastnosti
No properties available for this component.
Eventy
No events available for this component.
Metódy
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Vlastnosti
No CSS custom properties available for this component.
Sloty
No slots available for this component.