Generátor CSS grid

Generátor CSS grid

Vložte náčrt rozložení stránky a tento nástroj jej změní na funkční CSS grid kód. Napište každý řádek rozložení na svůj vlastní řádek a opakujte stejné slovo v buňkách, abyste označili pojmenovanou oblast — "header header" na jednom řádku, "nav main" na dalším, "footer footer" na posledním popisuje klasické rozložení se třemi řádky s plnou šířkou záhlaví a zápatí. Nástroj čte opakované názvy jako oblasti mřížky a automaticky generuje odpovídající deklaraci grid-template-areas.

Možnosti ovládají zbytek generovaného CSS. Nastavte mezeru mezi buňkami v pixelech a volitelně poskytněte explicitní šířky sloupců nebo výšky řádků pomocí jakékoli platné velikosti stopy CSS — jednotky fr, auto nebo minmax(); ponechte kterékoli pole prázdné a nástroj rovnoměrně rozloží stopy. Zapněte pravidla podle oblasti, abyste získali připravená pravidla grid-area pro každou pojmenovanou sekci s předponou třídy, kterou si zvolíte, takže "header" se stane .grid-header hned od začátku. Přepínač responzivity přidá mediální dotaz s maximální šířkou, který sbalí celé rozložení do jednoho sloupce pro úzké obrazovky, a přepínač HTML připojí odpovídající kostru značek, abyste viděli strukturu vedle CSS.

Pokud dva buňky se stejným jménem netvoří pevný obdélník — tvar L nebo jméno, které přeskočí buňku — skutečný CSS grid nemůže tuto oblast správně vykreslit, proto nástroj to označí přímo ve výstupu jako varovný komentář místo tichého generování neplatně vypadajících pravidel. Ukončení řádků z jakéhokoli operačního systému se zpracovávají stejným způsobem a živý počet pod výstupem sleduje, kolik řádků rozložení, pojmenovaných oblastí a znaků generovaný CSS obsahuje.

Všechno běží lokálně ve vašem prohlížeči; rozložení, které nakreslíte, a CSS, které dostanete zpět, se nikdy nikam neposílají. Zkopírujte výsledek, stáhněte jej jako soubor .txt nebo pošlete výstup přímo do jiného nástroje, jako je formátor CSS, abyste dále upravili odsazení.

Časté dotazy