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

3 enaki stolpci 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, nastavljen na tri stolpce enake širine v eni vrstici, z izklopljenimi imenovanimi območji – postavitev je le repeat(3, 1fr), najkrajši način za "trije stolpci, ki vedno enakomerno razdelijo razpoložljivo širino."

Stolpci enake širine so vlečna sila mrež kartic, tabel s cenami in galerij slik: nobenemu območju ni treba poimenovati, ker ima vsak stolpec enako vlogo, zato je navadno določanje velikosti sledi jasnejše kot deklaracija območij s predlogo mreže. Dodajte vrstico in iste tri skladbe se ponovijo spodaj, še vedno popolnoma enakomerno.

Povečajte število stolpcev za gostejšo mrežo ali vklopite poimenovana območja, če mora kasnejši stolpec izstopati od ostalih – spodnji CSS in HTML se posodobita takoj, ko to storite. Vse teče na strani odjemalca, tako da ni ničesar za naložiti in čakati.

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