Generator CSS grida
Pretvori skicu rasporeda teksta u pravu CSS mrežu s imenovanim područjima.
Generator CSS grida
Zalijepi grubu skicu rasporeda stranice i ovaj alat će je pretvoriti u radni CSS grid kod. Napiši svaki red rasporeda u zasebnoj liniji i ponovi istu riječ preko ćelija da bi označio imenovanu regiju — "header header" u jednoj liniji, "nav main" u sljedećoj, "footer footer" u posljednjoj opisuje klasičan trorednı̂ raspored s punom širinom zaglavlja i podnožja. Alat čita ponavljajuća imena kao grid područja i automatski generira odgovarajuću grid-template-areas deklaraciju.
Opcije kontroliraju ostatak generiranog CSS-a. Postavi razmak između ćelija u pikselima i opciono daj eksplicitne širine stupaca ili visine redaka koristeći bilo koji valjani CSS track size — fr jedinice, auto ili minmax(); ostavite jedno od polja prazno i alat će ravnomjerno razmjestiti tragove. Uključi pravila po području da bi dobio gotovu grid-area deklaraciju za svaku naimenovanu sekciju, koristeći prefiks imena koji odabereš, pa "header" postaje .grid-header odmah. Responzivni preklopnik dodaje max-width media query koja skuplja cijeli raspored u jedan stupac za uske zaslone, a HTML preklopnik dodaje odgovarajuću strukturu oznake kako bi vidio strukturu pored CSS-a.
Ako dvije ćelije s istim nazivom ne formiraju solidan pravokutnik — L-oblik ili naziv koji preskaće ćeliju — pravi CSS grid ne može pravilno prikazati to područje, pa alat to označava izravno u output-u kao komentar upozorenja umjesto da tiho generira nevaljane izgleđe. Završni znakovi sa bilo kojeg operacijskog sustava se obrađuju na isti način, a živa brojač ispod output-a prati koliko redaka rasporeda, imenovih područja i znakova generirani CSS sadrži.
Svečuje se lokalno u preglledniku; raspored koji skicirate i CSS koji dobijete se nikada ne šalju nigdje. Kopiraj rezultat, preuzmi kao .txt datoteku ili pošalji output izravno u drugi alat poput CSS formattora da malo urediš odvajanje dalje.