Generator CSS mreže
Pretvori besedilno skico postavitve v pravo CSS mrežo z imenovanimi področji.
Generator CSS mreže
Prilepi grobo skico postavitve strani in to orodje jo bo pretvorilo v delujoči CSS grid kod. Napiši vsako vrstico postavitve v ločeni črti in ponovi isto besedo čez celice, da označiš imenovano področje — "header header" v eni vrstici, "nav main" v naslednji, "footer footer" v zadnji opisuje klasično tri-vrstično postavitev s polno širino glave in noge. Orodje prebere ponavljajoča se imena kot grid polja in samodejno ustvari ustrezno grid-template-areas deklaracijo.
Možnosti nadzorujejo preostanek generiranega CSS-a. Nastavi razmik med celicami v slikovnih točkah in po želji podaj eksplicitne širine stolpcev ali višine vrstic z uporabo kateregakoli veljavnega CSS track size — fr enot, auto ali minmax(); pusti eno od polj prazno in orodje bo enakomerno razporedilo sledi. Vključi pravila po polju, da dobiš pripravljeno grid-area deklaracijo za vsak poimenovani razdelek, pri čemer uporabiš predpono imena, ki jo izbereš, zato "header" postane .grid-header takoj. Responzivni preklopnik doda max-width media query, ki zloži celotno postavitev v en stolpec za ozke zaslone, HTML preklopnik pa doda ustrezno strukturo oznak, da vidiš strukturo poleg CSS-a.
Če dve celici z istim imenom ne tvorita trdnega pravokotnika — oblika L ali ime, ki preskoči celico — pravi CSS grid ne more pravilno prikazati tega področja, zato orodje to neposredno označy v izhodu kot komentar opozorila namesto da tiho ustvari nepravilne videze. Zaključni znaki z kateregakoli operacijskega sistema se obdelajo na enak način in živi seštevek pod izhodom sledi, koliko vrstic postavitve, poimenovanih polj in znakov vsebuje generirani CSS.
Svečuje se lokalno v brskalniku; postavitev, ki jo skicirate, in CSS, ki ga dobijete, se nikoli ne pošljeta nikamor. Kopiraj rezultat, ga preuzmi kot datoteko .txt ali pošlji izhod neposredno v drugo orodje, kot je CSS oblikovalnik, da malo bolj uredis zamik dalje.