⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Generator CSS Grid

Vizualno oblikujte postavitve CSS Grid: nastavite stolpce, vrstice in razmik, nato v celice vpišite imena območij, da zgradite grid-template-areas – s predogledom v živo ter CSS in HTML za kopiranje.

🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.

Vpišite ime v katero koli celico spodaj; celice z enakim imenom se združijo v eno območje grid-template-areas.

Obdelava ... 0%

Rezultat

Deklaracija grid-template-areas je eden najbolj berljivih delov CSS, a šele ko obstaja – priti do nje ročno pomeni štetje nizov v narekovajih in ujemanje dolžin vrstic, ena sama neujemajoča se celica pa tiho pokvari celotno postavitev. Ta generator to spremeni v neposredno upravljanje: nastavite število stolpcev in vrstic, vtipkajte 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 grid-template-areas, vsaka celica, ki jo poimenujete, pa postane del pravokotnika tega imena. CSS dovoljuje, da poimenovana regija zaseda samo en čist pravokoten blok, zato orodje to preverja med vašim vpisovanjem in vam natančno pove, kdaj ime še ne tvori veljavnega pravokotnika – namesto da bi tiho ustvarilo CSS, ki ga bo brskalnik zavrnil.

Razmik med stolpci in razmik med vrsticami sta privzeto nastavljena na 8px in se združita v eno vrstico gap, ko se ujemata, predogled mreže v živo pa vedno zrcali vaše sledi grid-template-columns in grid-template-rows, vključno s fiksnimi stolpci v slikovnih pikah iz predloge, kot sta stranski tirnici širine 200px pri svetem gralu. Izhod za kopiranje pokriva obe strani: blok CSS, pripravljen za vaš slogovni list, in ujemajoči se HTML skelet z enim div grid-area za vsako poimenovano regijo.

Grid in flexbox rešujeta različne težave postavitve in css-flexbox-generator na tem spletnem mestu je boljše izhodišče za enodimenzionalne postavitve – eno vrstico ali stolpec prilagodljivih predmetov, kot je navigacijska vrstica ali skladovnica kartic. Po tem generatorju mrež posezite, ko potrebujete dvodimenzionalni nadzor, eksplicitne vrstice in stolpce ali poimenovane regije, kot so glava/navigacija/glavno/noga; obe orodji pogosto končata na isti strani, grid za lupino strani in flexbox znotraj njenih delov. Kot vsako orodje na tem spletnem mestu v celoti teče v vašem brskalniku – brez nalaganja, brez računa.

Uživate v tem orodju? Se vam zdi izdelek uporaben? Vidite v njem potencial in ga želite podpreti?

🛡️
Izvaja se v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka povsem brez povezave. 100-odstotno varno.

Sprejeti formati in pravila

  • Številski vnosi za 1–6 stolpcev in vrstic ter ločeni kontrolniki za razmik med stolpci in razmik med vrsticami, ki se združijo v eno vrednost gap, ko se ujemata.
  • Način poimenovanih območij: vpišite ime območja neposredno v katero koli celico mreže v živo; orodje sestavi veljaven niz grid-template-areas in opozori, kadar imena ne tvorijo čistih pravokotnikov.
  • Kopirajte blok CSS (display: grid, grid-template-columns/rows, gap, grid-template-areas) in ustrezen HTML skelet z enim div grid-area za vsako poimenovano regijo.

Ključne prednosti

✓ Vpišite ime neposredno v katero koli celico in ujemajoča se imena se združijo v eno regijo grid-template-areas – brez izbiranja z miško, brez ročnega ugibanja sintakse nizov v narekovajih.
✓ Predogled mreže v živo se ob vsaki spremembi prilagodi po velikosti in barvi, tako da vidite natančne sledi stolpcev in vrstic ter vsako poimenovano regijo, še preden kopirate eno samo vrstico CSS.
✓ Predloge, kot je klasična postavitev svetega grala in ozka stranska vrstica, vam dajo resnično, delujočo deklaracijo grid-template-areas, s katero lahko začnete, namesto prazne mreže.

Primeri uporabe

  • • Zgradite klasični t. i. »holy grail« postavitve strani – glava in noga čez celotno širino, v srednji vrstici pa navigacija, glavna vsebina in stranski stolpec – tako, da namesto ročnega pisanja grid-template-areas preprosto vpišete imena območij.
  • • Oblikujte stran z nastavitvami ali nadzorno ploščo s fiksno široko stransko vrstico ob prilagodljivem vsebinskem stolpcu in kopirajte točen CSS in HTML, ko je predogled v živo videti pravilno.
  • • Pred objavo preverite, ali nabor poimenovanih območij dejansko tvori veljavne pravokotnike – orodje označi točno tista imena, ki bi v brskalniku pokvarila grid-template-areas.