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

Bočna traka + Sadržaj CSS Grid Layout

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 već imenovanim izgledom s dva stupca i jednim redom: stupac bočne trake od 200 piksela pokraj stupca fleksibilnog sadržaja koji zauzima preostali prostor. Oba su područja odmah vidljiva u pretpregledu uživo, obojena i označena tako da je razdvajanje vidljivo na prvi pogled.

Ovo je najčešći oblik navigacije i sadržaja na webu — stranice s postavkama, web-mjesta s dokumentacijom i nadzorne ploče administratora sve se naslanjaju na šinu fiksne širine pored fluidnog glavnog područja. Budući da stupac bočne trake koristi vrijednost piksela, a stupac sadržaja koristi 1fr, bočna traka ostaje konstantne širine dok stupac sadržaja apsorbira svaki dodatni piksel okvira za prikaz.

Preimenujte bilo koje područje, promijenite širinu stupca ili dodajte više redaka za zaglavlje iznad podjele — CSS i HTML izlaz ispod prati svako uređivanje u stvarnom vremenu. Alat je besplatan i u potpunosti radi u vašem pregledniku, bez prijenosa i računa.

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