Čo je Grid System?
Grid system (mriežkový systém) je štruktúra neviditeľných vertikálnych stĺpcov a horizontálnych riadkov, ktorá organizuje obsah na webstránke. Zabezpečuje zarovnanie prvkov, konzistentné rozloženie a responzívne správanie.
Definícia Grid System
Čo je grid system
Grid system (mriežkový systém) je základný nástroj grafického a webového dizajnu na organizáciu obsahu do zarovnanej, konzistentnej štruktúry. Webové gridy typicky používajú 12 stĺpcov, pretože 12 je deliteľné 1, 2, 3, 4, 6 a 12 — čo umožňuje flexibilné rozloženia.
Koncept mriežky v dizajne má korene v tlačovom dizajne 20. storočia. Švajčiarsky štýl (International Typographic Style) ho systematizoval v 50. rokoch. Na webe ho spopularizoval Bootstrap v roku 2011.
Komponenty grid systému
- Stĺpce (columns) — vertikálne oddiely, typicky 12 na desktope
- Medzery (gutters) — priestor medzi stĺpcami (16-32px)
- Okraje (margins) — priestor na okrajoch kontajnera
- Kontajner — maximálna šírka obsahu (napr. 1200px alebo 1440px)
CSS Grid a Flexbox
Moderné CSS ponúka natívne nástroje pre mriežkové rozloženia. CSS Grid je ideálny pre dvojrozmerné layouty (riadky aj stĺpce). Flexbox je vhodnejší pre jednorozmerné rozloženia (riadok alebo stĺpec). V praxi sa často kombinujú — Grid pre celkovú štruktúru stránky, Flexbox pre rozloženie vnútri komponentov.
Praktický príklad
Príklad: Blog s bočným panelom na desktope.
12-stĺpcový grid: Hlavný obsah zaberá 8 stĺpcov, bočný panel 4 stĺpce. Na tablete sa panel presunie pod obsah (oba 12 stĺpcov). Na mobile zmizne sidebar úplne.
Výhoda: Obsah je vždy zarovnaný, proporcie sú konzistentné a responzívne správanie je predvídateľné.
Často kladené otázky
Čo je grid system na webe?
Grid system je štruktúra neviditeľných stĺpcov a medzier, ktorá organizuje obsah na webstránke. Typicky používa 12 stĺpcov a zabezpečuje zarovnanie a konzistentné rozloženie.
Prečo sa používa 12-stĺpcový grid?
12 je deliteľné 1, 2, 3, 4, 6 a 12. To umožňuje jednoducho vytvoriť rozloženie s 1, 2, 3, 4, 6 alebo 12 stĺpcami — pokrýva väčšinu dizajnových potrieb.
Aký je rozdiel medzi CSS Grid a Flexbox?
CSS Grid je dvojrozmerný (riadky + stĺpce) — ideálny pre celkové rozloženie stránky. Flexbox je jednorozmerný (riadok alebo stĺpec) — vhodný pre rozloženie vnútri komponentov.
Potrebujem Bootstrap pre grid system?
Nie. Moderné CSS Grid a Flexbox poskytujú natívne gridové rozloženia bez externých knižníc. Tailwind CSS a iné utility-first frameworky tiež ponúkajú gridové triedy.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.