CSS Grid generátor
Nastavte sloupce a řádky, tažením přes buňky rozmístěte položky a jedním kliknutím zkopírujte CSS mřížky s odpovídajícím HTML.
Vaše mřížka se sestavuje přímo ve vašem prohlížeči. Nic z toho, co zde nastavíte, se neodesílá na servery BroBroGo.
Časté dotazy
Jak umístím položky na mřížku?
Stiskněte tlačítko myši a táhněte přes buňky, čímž vyznačíte obdélník – po uvolnění se z něj stane umístěný potomek přesahující dané sloupce a řádky. Každá nakreslená položka získá v CSS vlastní pravidla grid-column a grid-row a odpovídající div v HTML. Položky se mohou překrývat, přičemž později nakreslená položka leží nahoře; k jejímu odstranění použijte křížek ×.
Mohou mít sloupce a řádky různé velikosti?
Ano. Každá stopa (track) má své vlastní pole pro velikost, kam můžete zadat jakoukoli hodnotu pro grid – např. 1fr, 200px, auto, min-content nebo minmax(120px, 1fr). Stopy, které sdílejí stejnou velikost, se sloučí do funkce repeat(), aby byl výstup co nejkratší. Mezery mezi sloupci a řádky se nastavují samostatně a při shodě se sloučí do jediné vlastnosti gap.
Co mám udělat s vygenerovaným kódem?
Zkopírujte CSS a HTML kód vedle sebe. HTML vám poskytne kontejner s jedním divem pro každou položku a CSS definuje mřížku a umístění jednotlivých prvků. Vložte obojí do svého projektu a získáte přesně takový layout, jaký jste si zde nakreslili.