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

Sveti gral CSS Grid Layout — pripravljena koda

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.

V katero koli spodnjo celico vnesite ime; celice z istim imenom se združijo v eno regijo območij mrežne predloge.

Obdelava ... 0%

Rezultat

Ta stran odpre generator mreže, v katerem je vnaprej naložena postavitev svetega grala: trije stolpci in tri vrstice, z glavo in nogo, ki se raztezata po celotni širini, vmes pa je nav/glavna/stranska vrstica. Vrstica glave uporablja samodejno višino, srednja vrstica zapolni preostali prostor, stranska stolpca pa sta fiksna na 200 slikovnih pik, medtem ko glavni stolpec zavzame preostanek.

Postavitev svetega grala si je prislužila ime, ker jo je bilo res težko zgraditi zanesljivo, preden je CSS Grid – leta lebdečih hekov, postavitev tabel in absolutnega pozicioniranja so poskušala ponarediti to natančno obliko. Z območji mrežne predloge se strne na pet imenovanih regij in nekaj velikosti sledi, zato ostaja standardni prvi primer za poučevanje mreže CSS.

Vsaka številka in vrzel na tej strani je še vedno v živo: skrčite stranske stolpce, dodajte četrto vrstico ali preimenujte območje in predogled ter CSS, ki ga je mogoče kopirati, se takoj posodobita. Kopirajte bloke CSS in HTML naravnost v svoj projekt – vse se izvaja lokalno v vašem brskalniku, nič se ne naloži.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Vnosi številk za 1–6 stolpcev in vrstic ter ločeni kontrolniki vrzeli med stolpci in vrsticami, ki se združijo v eno vrednost vrzeli, ko se ujemajo.
  • Način poimenovanih območij: vnesite ime območja neposredno v katero koli celico mreže v živo; orodje zgradi veljaven niz grid-template-areas in opozori, ko imena ne tvorijo čistih pravokotnikov.
  • Blok CSS, ki ga je mogoče kopirati (prikaz: mreža, stolpci/vrstice-mrežne predloge, vrzel, območja-mrežne predloge) in ujemajoče se okostje HTML z enim divom mrežnega območja na imenovano regijo.

Ključne prednosti

✓ Vnesite ime naravnost v katero koli celico in ujemajoča se imena se bodo združila v eno območje območij mrežnih predlog – brez vlečenja izbire, brez ročnega ugibanja sintakse niza v narekovajih.
✓ Mreža za predogled v živo spremeni velikost in barvo ob vsaki spremembi, tako da vidite natančne sledi stolpcev in vrstic ter vsako imenovano regijo, preden kopirate posamezno vrstico CSS.
✓ Prednastavitve, kot sta klasična postavitev svetega grala in ozka stranska vrstica, vam dajejo pravo, delujočo deklaracijo območij predloge mreže, s katero lahko začnete namesto prazne mreže.

Primeri uporabe

  • • Zgradite klasično lupino strani za sveti gral – glavo in nogo polne širine s srednjo vrstico za krmarjenje/glavno/stransko – tako, da vnesete imena območij namesto ročnega pisanja območij mrežnih predlog.
  • • Postavite stran z nastavitvami ali skrbniško nadzorno ploščo s stransko vrstico s fiksno širino poleg stolpca s prilagodljivo vsebino in kopirajte natančen CSS in HTML, ko bo predogled v živo videti pravilen.
  • • Pred pošiljanjem preverite, ali nabor poimenovanih območij dejansko tvori veljavne pravokotnike – orodje označi natančna imena, ki bi v brskalniku prekinila območja mrežne predloge.