⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

Sveti Gral CSS Grid Layout — Ready Code

Vizualno dizajnirajte CSS Grid rasporede: postavite stupce, retke i razmake, a zatim upišite nazive područja u ćelije kako biste izgradili područja predložaka mreže — uz live pregled i CSS i HTML koji se mogu kopirati.

Upišite naziv u bilo koju ćeliju ispod; ćelije s istim imenom spajaju se u jednu regiju područja predloška mreže.

Obrada... 0%

Rezultat

Ova stranica otvara generator rešetke s predučitanim izgledom svetog grala: tri stupca i tri retka, s zaglavljem i podnožjem koji se protežu cijelom širinom i navigacijskim/glavnim/postranim redom između. Redak zaglavlja koristi automatsku visinu, srednji redak ispunjava preostali prostor, a dva bočna stupca su fiksirana na 200 px dok glavni stupac zauzima ostatak.

Izgled svetog grala zaslužio je svoje ime jer ga je bilo uistinu teško izgraditi pouzdano prije CSS Grida — godine float hackova, rasporeda tablica i apsolutnog pozicioniranja pokušale su lažirati točan oblik. S grid-template-areas sažima se na pet imenovanih regija i pregršt veličina staza, zbog čega ostaje standardni prvi primjer za podučavanje CSS Grida.

Svaki broj i praznina na ovoj stranici još uvijek su aktivni: smanjite bočne stupce, dodajte četvrti red ili preimenujte područje i pregled i CSS koji se može kopirati odmah se ažuriraju. Kopirajte CSS i HTML blokove izravno u svoj projekt — sve radi lokalno u vašem pregledniku, ništa se ne učitava.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Unosi brojeva za 1–6 stupaca i redaka, plus zasebne kontrole razmaka u stupcu i retka koje se kombiniraju u jednu vrijednost razmaka kada se podudaraju.
  • Način rada s imenovanim područjima: upišite naziv područja izravno u bilo koju ćeliju mreže uživo; alat gradi važeći niz grid-template-areas i upozorava kada imena ne tvore čiste pravokutnike.
  • CSS blok koji se može kopirati (prikaz: rešetka, rešetka-predložak-stupaca/redova, praznina, područja-predloška mreže) plus odgovarajući HTML kostur s jednim divom područja rešetke po imenovanom području.

Ključne prednosti

✓ Upišite naziv ravno u bilo koju ćeliju i odgovarajući nazivi spojit će se u jednu regiju područja predloška rešetke — bez odabira povlačenjem, bez ručnog pogađanja sintakse niza navodnika.
✓ Mreža pregleda uživo mijenja veličinu i boju pri svakoj promjeni, tako da vidite točne tragove stupca i retka i svaku imenovanu regiju prije kopiranja jednog retka CSS-a.
✓ Unaprijed postavljene postavke poput klasičnog rasporeda svetog grala i uske bočne trake daju vam stvarnu, radnu deklaraciju područja predloška mreže za početak umjesto prazne mreže.

Slučajevi upotrebe

  • • Izgradite klasičnu ljusku stranice svetog grala — zaglavlje i podnožje pune širine s navigacijskim/glavnim/postranim srednjim redom — upisivanjem naziva područja umjesto rukom ispisanog grid-template-areas.
  • • Postavite stranicu s postavkama ili administratorsku nadzornu ploču s bočnom trakom fiksne širine pored fleksibilnog stupca sadržaja i kopirajte točan CSS i HTML kada pregled uživo bude izgledao kako treba.
  • • Prije slanja provjerite da li skup imenovanih područja stvarno tvori valjane pravokutnike — alat označava točna imena koja bi razbila područja predloška mreže u pregledniku.