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

Stranska vrstica + vsebina CSS Grid Layout

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 z že imenovano postavitvijo z dvema stolpcema in eno vrstico: stolpec stranske vrstice z 200 slikovnimi pikami poleg stolpca s prilagodljivo vsebino, ki zavzame preostali prostor. Obe področji sta vidni v predogledu v živo takoj, obarvani in označeni, tako da je razdelitev očitna na prvi pogled.

To je najpogostejša oblika navigacije in vsebine v spletu – strani z nastavitvami, spletna mesta z dokumentacijo in skrbniške nadzorne plošče se vse naslanjajo na vodilo s fiksno širino poleg tekočega glavnega območja. Ker stolpec stranske vrstice uporablja vrednost pikslov, stolpec vsebine pa 1fr, stranska vrstica ostane konstantne širine, medtem ko stolpec vsebine absorbira vsako dodatno slikovno piko vidnega polja.

Preimenujte katero koli področje, spremenite širino stolpca ali dodajte več vrstic za glavo nad razdelitvijo – spodnji izhod CSS in HTML spremlja vsako urejanje v realnem času. Orodje je brezplačno in v celoti deluje v vašem brskalniku, brez nalaganja in računa.

🛡️
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.