CSS Grid Generátor

Deklarace grid-template-areas je jedna z nejčitelnějších částí CSS, ale až ve chvíli, kdy existuje – dostat se k ní ručně znamená počítat řetězce v uvozovkách a hlídat délky řádků, a jedna chybně umístěná buňka potichu rozbije celé rozvržení. Tento generátor to mění na přímou manipulaci: nastavte počty sloupců a řádků, napište název do libovolné buňky živé mřížky a shodné názvy se automaticky sloučí do jedné pojmenované oblasti.

Pod kapotou se každá buňka, kterou necháte prázdnou, stane tečkou ve vygenerovaném řetězci grid-template-areas a každá pojmenovaná buňka se stane součástí obdélníku s tímto názvem. CSS dovoluje, aby pojmenovaná oblast zabírala pouze jeden čistý obdélníkový blok, takže to nástroj při psaní kontroluje a řekne vám přesně, kdy název ještě netvoří platný obdélník – namísto aby potichu vytvořil CSS, které prohlížeč odmítne.

Mezera mezi sloupci a mezi řádky je standardně 8px a při shodě se sloučí do jediného řádku gap. Živý náhled mřížky vždy zrcadlí vaše definice grid-template-columns a grid-template-rows, včetně pevných pixelových sloupců z předvolby, jako jsou 200px postranní lišty u Holy Grailu. Zkopírovatelný výstup pokrývá obě strany: CSS blok připravený pro váš stylesheet a odpovídající HTML kostru s jedním `div` s `grid-area` pro každou pojmenovanou oblast.

Grid a flexbox řeší různé typy rozvržení a zdejší css-flexbox-generator je lepším výchozím bodem pro jednorozměrné layouty – jeden řádek či sloupec pružných prvků, jako je navigační lišta nebo sada karet. Sáhněte po tomto generátoru gridu, když potřebujete dvourozměrnou kontrolu, explicitní řádky a sloupce nebo pojmenované oblasti jako header/nav/main/footer; oba nástroje často končí na stejné stránce – grid pro obal stránky a flexbox uvnitř jeho částí. Jako každý nástroj na tomto webu běží výhradně ve vašem prohlížeči – bez nahrávání a bez účtu.