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

Generator CSS mreže

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

Deklaracija grid-template-areas jedan je od najčitljivijih dijelova CSS-a koji postoji, ali samo jednom kada postoji — doći do nje ručno znači brojati citirane nizove i podudarati duljine redaka, a jedna neusklađena ćelija tiho prekida cijeli izgled. Ovaj generator to pretvara u izravnu manipulaciju: postavite broj stupaca i redaka, upišite naziv u bilo koju ćeliju mreže uživo i odgovarajući nazivi automatski se spajaju u jedno imenovano područje.

Ispod haube, svaka ćelija koju ostavite praznom postaje točka u generiranom nizu područja područja predloška mreže, a svaka ćelija kojoj date naziv postaje dio pravokutnika s tim imenom. CSS dopušta samo da imenovana regija zauzima jedan čisti pravokutni blok, tako da alat to provjerava dok upisujete i govori vam točno kada naziv još ne tvori važeći pravokutnik — umjesto tihe proizvodnje CSS-a, preglednik će odbiti.

Column-gap i row-gap zadani su na 8 px i kombiniraju se u jednu liniju razmaka kada se poklapaju, a mreža za pregled uživo uvijek odražava vaše tragove stupaca rešetke-predloška i redaka rešetke-predloška, uključujući fiksne stupce piksela iz unaprijed postavljenih kao što su bočne ograde od 200 piksela svetog grala. Izlaz koji se može kopirati pokriva obje strane: CSS blok spreman za vašu tablicu stilova i odgovarajući HTML kostur s jednim divom mrežnog područja po imenovanom području.

Grid i flexbox rješavaju različite probleme izgleda, a css-flexbox-generator na ovoj stranici je bolja polazna točka za jednodimenzionalne rasporede — jedan red ili stupac fleksibilnih stavki kao što je navigacijska traka ili hrpa kartica. Umjesto toga posegnite za ovim generatorom rešetki kada trebate dvodimenzionalnu kontrolu, eksplicitne retke i stupce ili imenovane regije kao što su zaglavlje/navigacija/glavno/podnožje; dva alata često završe na istoj stranici, rešetka za ljusku stranice i flexbox unutar njegovih dijelova. Kao i svaki alat na ovoj stranici, u potpunosti radi u vašem pregledniku - bez prijenosa, bez 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.