Vizuálny návrh mriežky pomocou Generátor CSS Grid
Tento nástroj umožňuje vizuálne navrhovať rozloženie CSS mriežky nastavovaním počtu stĺpcov a riadkov, definovaním ich veľkostí a určovaním medzier medzi nimi. Priamo v grafickom rozhraní môžete ťahať myšou cez bunky mriežky a umiestňovať tak jednotlivé položky do požadovaného rozloženia. Nástroj automaticky generuje zodpovedajúci CSS a HTML kód pre navrhnutú mriežku, ktorý si môžete skopírovať a vložiť do vlastného projektu.
Vaša mriežka sa vytvára priamo vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo. Spracovanie prebieha lokálne, bez nahrávania údajov na server.
Vstupné parametre a limity rozhrania
Pri konfigurácii mriežky pracujete s nasledujúcimi vstupnými hodnotami a obmedzeniami:
- Stĺpce: Číselná hodnota v rozsahu od 1 do 12.
- Riadky: Číselná hodnota v rozsahu od 1 do 12.
- Medzera medzi stĺpcami: Hodnota od 0 do 48px.
- Medzera medzi riadkami: Hodnota od 0 do 48px.
- Veľkosti stĺpcov a Veľkosti riadkov: Akákoľvek platná hodnota pre CSS grid, napríklad
1fr,200px,auto,min-contentalebominmax(120px, 1fr). Každá stopa (riadok či stĺpec) má vlastné pole pre veľkosť. Ak do poľa zadáte neplatnú hodnotu (napríkladnot-a-grid-track), vstupný formulár sa označí ako neplatný, no vygenerovaný CSS výstup si zachová poslednú platnú hodnotu. - Umiestnenie položiek: Vykonáva sa ťahaním myšou cez bunky, čím sa vyznačí obdĺžniková oblasť. Nástroj podporuje maximálne 16 položiek.
Pravidlá generovania kódu a správanie mriežky
Pri interakcii s mriežkou platia presné pravidlá pre výpočet výsledného CSS a HTML kódu:
- Umiestnenie položiek ťahaním: Kliknutím a ťahaním myšou cez bunky vyznačíte obdĺžnik. Po uvoľnení tlačidla myši sa vytvorí umiestnená podradená položka presahujúca dané stĺpce a riadky. Každá nakreslená položka získa vlastné pravidlo
grid-columnagrid-rowv CSS a zodpovedajúcidivv HTML. - Prekrývanie položiek: Položky sa môžu prekrývať. Položka, ktorú nakreslíte neskôr, sa umiestni navrch nad predtým nakreslené položky. Kliknutím na symbol "×" na položke ju môžete odstrániť.
- Zlučovanie stôp pomocou
repeat(): Ak viacero stôp (stĺpcov alebo riadkov) zdieľa rovnakú veľkosť, nástroj ich vo vygenerovanom CSS kóde automaticky zlúči do zápisu s funkciourepeat(). - Zlučovanie medzier: Medzera medzi stĺpcami a medzera medzi riadkami sa nastavujú samostatne. Ak sa však ich hodnoty zhodujú, vo výslednom CSS sa zlúčia do jedinej skrátenej vlastnosti
gap. - Ovládacie prvky: Tlačidlo "Pridať položku" vygeneruje HTML položku. Tlačidlo "Vymazať položky" vyčistí celú mriežku, čo vedie k prázdnemu HTML kontajneru a počtu položiek nastavenému na 0.
Preddefinované rozloženia (Predvoľby)
Pre rýchly štart ponúka nástroj štyri predvoľby, ktoré okamžite nakonfigurujú štruktúru mriežky a rozmiestnia položky:
- Bočný panel: Vytvorí rozloženie s vyhradeným bočným stĺpcom pre navigáciu a hlavným obsahovým panelom.
- Hlavička a päta: Klasické trojúrovňové rozloženie s horným pásom pre hlavičku, stredným obsahom a spodným pásom pre pätu.
- Galéria: Táto predvoľba automaticky vygeneruje 3 stĺpce, 2 riadky a 3 umiestnené položky.
- Prehľad (Dashboard): Komplexnejšia štruktúra vhodná pre administrátorské rozhrania s viacerými informačnými panelmi vedľa seba.
Technické základy CSS Grid Layout
Pre správne pochopenie vygenerovaného kódu je dôležité poznať základné vlastnosti, ktoré nástroj konfiguruje.
Vlastnosti grid-template-columns a grid-template-rows
Tieto vlastnosti definujú štruktúru mriežky. Určujú počet stĺpcov a riadkov a priraďujú im konkrétne veľkosti. Napríklad zápis grid-template-columns: 200px 1fr 120px; definuje tri stĺpce: prvý má pevnú šírku 200 pixelov, druhý zaberie zvyšný voľný priestor a tretí má pevnú šírku 120 pixelov.
Jednotka fr (Fractional Unit)
Jednotka fr predstavuje flexibilný zlomok voľného priestoru v kontajneri mriežky. Ak definujete stĺpce ako 1fr 2fr, voľný priestor sa rozdelí na tri rovnaké časti, pričom prvý stĺpec získa jednu tretinu a druhý stĺpec dve tretiny dostupného miesta.
Funkcia repeat()
Na zjednodušenie zápisu duplicitných hodnôt slúži funkcia repeat(). Namiesto zdĺhavého zápisu grid-template-columns: 1fr 1fr 1fr 1fr; vygeneruje nástroj čistejší kód grid-template-columns: repeat(4, 1fr);.
Definovanie medzier pomocou column-gap a row-gap
Tieto vlastnosti určujú šírku medzier (žľabov) medzi stĺpcami a riadkami bez toho, aby ovplyvnili veľkosť samotných buniek. Ak sú obe hodnoty identické, zlúčia sa do zápisu gap: 16px;.
Umiestňovanie položiek pomocou grid-column a grid-row
Každá umiestnená položka v mriežke je definovaná svojou počiatočnou a koncovou líniou. Zápis grid-column: 1 / 3; znamená, že položka začína na prvej zvislej línii mriežky a končí na tretej línii, čím premostí dva stĺpce.
Často kladené otázky (FAQ)
Ako umiestnim položky na mriežku?
Kliknite a ťahajte myšou cez bunky, čím vyznačíte obdĺžnik – po uvoľnení sa z neho stane umiestnená podradená položka presahujúca dané stĺpce a riadky. Každá nakreslená položka získa vlastné pravidlo grid-column a grid-row v CSS a zodpovedajúci div v HTML. Položky sa môžu prekrývať, pričom neskôr nakreslená položka bude navrchu; na odstránenie položky použite symbol ×.
Môžu mať stĺpce a riadky rôzne veľkosti?
Áno. Každá stopa (riadok či stĺpec) má vlastné pole pre veľkosť, kam môžete zadať akúkoľvek hodnotu mriežky – 1fr, 200px, auto, min-content alebo minmax(120px, 1fr). Stopy, ktoré zdieľajú rovnakú veľkosť, sa zlúčia do funkcie repeat(), aby bol výstup čo najkratší. Medzery medzi stĺpcami a riadkami sa nastavujú samostatne a v prípade zhody sa zlúčia do jedinej vlastnosti gap.
Čo mám urobiť s vygenerovaným kódom?
Skopírujte CSS a HTML kód. HTML kód vám poskytne kontajner s jedným divom pre každú položku a CSS definuje mriežku a umiestňuje jednotlivé prvky. Vložte oba kódy do svojho projektu a získate presne také rozloženie, aké ste tu nakreslili.
Kde prebieha spracovanie mojich údajov?
Vaša mriežka sa vytvára priamo vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo, takže celý proces návrhu je plne lokálny.