CSS Grid Generator

Deklarace grid-template-areas je jednou z nejčitelnějších částí CSS, která existuje, ale pouze jakmile existuje – dostat se tam ručně znamená počítat řetězce v uvozovkách a porovnávat délky řádků a jedna neshodná buňka tiše naruší celé rozložení. Tento generátor to změní na přímou manipulaci: nastavte počty sloupců a řádků, zadejte název do libovolné buňky živé mřížky a odpovídající názvy se automaticky sloučí do jedné pojmenované oblasti.

Pod pokličkou se každá buňka, kterou necháte prázdnou, stane tečkou ve vygenerovaném řetězci grid-template-areas a každá buňka, kterou pojmenujete, se stane součástí obdélníku tohoto názvu. CSS umožňuje pojmenované oblasti zabírat pouze jeden čistý obdélníkový blok, takže nástroj to během psaní kontroluje a přesně vám řekne, kdy název ještě netvoří platný obdélník – namísto tichého vytváření CSS prohlížeč odmítne.

Mezera sloupců a mezera mezi řádky je výchozí 8 pixelů a sloučí se do jediné mezery, když se shodují, a mřížka živého náhledu vždy zrcadlí vaše stopy mřížky-sloupce-šablony-a mřížky-šablony-řádky, včetně sloupců s pevnými pixely z přednastavení, jako jsou boční zábradlí svatého grálu 200 pixelů. Kopírovatelný výstup pokrývá obě strany: blok CSS připravený pro vaši šablonu stylů a odpovídající kostru HTML s jednou mřížkou div na pojmenovanou oblast.

Mřížka a flexbox řeší různé problémy s rozvržením a css-flexbox-generator na tomto webu je lepším výchozím bodem pro jednorozměrná rozvržení – jeden řádek nebo sloupec flexibilních položek, jako je navigační panel nebo stoh karet. Sáhněte po tomto generátoru mřížky, když potřebujete dvourozměrné ovládání, explicitní řádky a sloupce nebo pojmenované oblasti jako záhlaví/nav/hlavní/zápatí; the two tools often end up on the same page, grid for the page shell and flexbox inside its pieces. Jako každý nástroj na tomto webu běží celý ve vašem prohlížeči – žádné nahrávání, žádný účet.