Generátor CSS Grid

Nastavte stĺpce a riadky, ťahaním cez bunky umiestnite položky a jedným kliknutím skopírujte CSS mriežky spolu s HTML kódom.

Predvoľby
Položky
CSS
HTML
Ťahaním po mriežke umiestnite položku.

Vaša mriežka sa vytvára priamo vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo.

Časté otázky

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.

Generátor CSS Cubic BezierŤahaním dvoch tiahel vytvarujte krivku plynulosti, sledujte pohyb bodu v porovnaní s rovnomerným a skopírujte hodnotu cubic-bezier().Generátor FlexboxuNastavte flex kontajner a jeho položky pomocou vizuálnych prvkov, sledujte zmeny v reálnom čase a skopírujte CSS jedným kliknutím.Generátor tieňov (Box Shadow)Nastavte tieň pomocou posuvníkov, vrstvite tiene pre dosiahnutie hĺbky a okamžite skopírujte hotové CSS.Generátor gradientov (prechodov farieb)Vytvorte lineárny, radiálny alebo kónický gradient, pridajte farebné body, nastavte smer a skopírujte CSS jedným kliknutím.Generátor zaoblenia rohov (Border Radius)Zaobľujte rohy pomocou posuvníkov, vytvárajte organické tvary v eliptickom režime a okamžite kopírujte CSS.Kalkulačka CSS clamp()Zadajte veľkosť pre malé a veľké obrazovky a získajte fluidnú hodnotu clamp(), ktorá sa medzi nimi plynule prispôsobí – pre veľkosť písma, padding, margin či gap.