Generátor CSS grid
Premeniť text kvásku rozloženia na skutočný CSS grid s menovanými oblasťami.
Generátor CSS grid
Vložte kvásku rozloženia stránky a tento nástroj ju premení na pracovný CSS grid kód. Napíšte každý riadok rozloženia na vlastný riadok a opakujte rovnaké slovo v bunkách, aby ste označili menovanú oblasť — "header header" na jednom riadku, "nav main" na ďalšom, "footer footer" na poslednom opisuje klasické rozloženie s tromi riadkami s plnou šírkou záhlavia a päty. Nástroj číta opakované názvy ako oblasti mriežky a automaticky generuje zodpovedajúcu deklaráciu grid-template-areas.
Možnosti ovládajú zvyšok generovaného CSS. Nastavte vzdialenosť medzi bunkami v pixeloch a voliteľne poskytnite explicitné šírky stĺpcov alebo výšky riadkov pomocou ľubovoľnej platnej veľkosti stopy CSS — jednotky fr, auto alebo minmax(); nechajte ktorékoľvek pole prázdne a nástroj rovnomerne rozloží stopy. Zapnite pravidlá podľa oblasti, aby ste dostali vopred pripravenú deklaráciu grid-area pre každú menovanú sekciu, s použitím predpony triedy, ktorú si vyberiete, takže "header" sa stane .grid-header hneď zo začiatku. Prepínač responzivity pridá mediálny dopyt s maximálnou šírkou, ktorý zbalí celé rozloženie do jedného stĺpca pre úzke obrazovky, a prepínač HTML připojí zodpovedajúcu kostru značiek, aby ste videli štruktúru vedľa CSS.
Ak dva buňky s rovnakým menom netvoria pevný obdĺžnik — tvar L alebo názov, ktorý preskočí bunku — skutočný CSS grid nemôže túto oblasť správne vykresliť, preto nástroj to označí priamo vo výstupe ako varovný komentár namiesto tichého generovania neplatne vyzerajúcich pravidiel. Zakončenia riadkov z akéhokoľvek operačného systému sa spracovávajú rovnakým spôsobom a živé počítanie pod výstupom sleduje, koľko riadkov rozloženia, menovaných oblastí a znakov generovaný CSS obsahuje.
Všetko beží lokálne vo vašom prehliadači; rozloženie, ktoré si nakreslíte, a CSS, ktoré dostanete späť, sa nikdy nikam neposielajú. Skopírujte výsledok, stiahnite si ho ako .txt súbor alebo pošlite výstup priamo do iného nástroja, ako je formátor CSS, aby ste ďalej upravili odsadenie.