Generator mreže CSS
Vizualno oblikujte postavitve mreže CSS: nastavite stolpce, vrstice in vrzeli, nato vnesite imena območij v celice, da ustvarite območja mrežne predloge — s predogledom v živo ter CSS in HTML, ki ju je mogoče kopirati.
Rezultat
Deklaracija grid-template-areas je eden najbolj berljivih delov CSS-ja, vendar le, ko obstaja – ročno dostopanje do tja pomeni štetje narekovanih nizov in ujemanje dolžin vrstic, ena neujemajoča se celica pa tiho prekine celotno postavitev. Ta generator to spremeni v neposredno manipulacijo: nastavite štetje stolpcev in vrstic, vnesite ime v katero koli celico mreže v živo in ujemajoča se imena se samodejno združijo v eno poimenovano regijo.
Pod pokrovom vsaka celica, ki jo pustite prazno, postane pika v ustvarjenem nizu področij mreže-predloge in vsaka celica, ki jo poimenujete, postane del pravokotnika tega imena. CSS dovoljuje, da poimenovana regija zasede samo en čisti pravokotni blok, zato orodje to preveri med tipkanjem in vam natančno pove, kdaj ime še ne tvori veljavnega pravokotnika – namesto da bi tiho ustvaril CSS, bo brskalnik zavrnil.
Column-gap in row-gap sta privzeto nastavljeni na 8 slikovnih pik in sta združeni v eno samo vrzel, ko se ujemata, mreža za predogled v živo pa vedno zrcali vaše sledi stolpcev mrežnih predlog in vrstic mrežnih predlog, vključno s stolpci s fiksnimi slikovnimi pikami iz prednastavitve, kot so stranske tirnice svetega grala z 200 slikovnimi pikami. Izhod, ki ga je mogoče kopirati, pokriva obe strani: blok CSS, pripravljen za vašo datoteko slogov, in ujemajoče se okostje HTML z enim divom mrežnega območja na imenovano regijo.
Mreža in flexbox rešujeta različne težave s postavitvijo, generator css-flexbox na tem spletnem mestu pa je boljše izhodišče za enodimenzionalne postavitve – ena vrstica ali stolpec s prilagodljivimi elementi, kot je vrstica za krmarjenje ali sveženj kartic. Namesto tega posezite po tem generatorju mreže, ko potrebujete dvodimenzionalni nadzor, eksplicitne vrstice in stolpce ali poimenovane regije, kot so glava/nav/glavna/noga; obe orodji se pogosto znajdeta na isti strani, mreža za lupino strani in flexbox znotraj njenih delov. Kot vsako orodje na tem spletnem mestu deluje v celoti v vašem brskalniku – brez nalaganja, brez računa.