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

Generator CSS Grida

Vizualno oblikujte CSS Grid rasporede: postavite stupce, retke i razmake, zatim upišite nazive područja u ćelije kako biste izgradili grid-template-areas — uz prikaz uživo i CSS i HTML koji možete kopirati.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Upišite naziv u bilo koju ćeliju ispod; ćelije s istim nazivom spajaju se u jedno grid-template-areas područje.

Obrada... 0%

Rezultat

Deklaracija grid-template-areas jedan je od najčitljivijih dijelova CSS-a koji postoje, ali tek kad nastane — doći do nje ručno znači brojati nizove s navodnicima i usklađivati duljine redaka, a jedna neusklađena ćelija tiho pokvari cijeli raspored. Ovaj generator to pretvara u izravnu manipulaciju: postavite broj stupaca i redaka, upišite naziv u bilo koju ćeliju mreže uživo i podudarni nazivi automatski se spajaju u jednu imenovanu regiju.

U pozadini, svaka ćelija koju ostavite praznom postaje točka u generiranom nizu grid-template-areas, a svaka ćelija koju imenujete postaje dio pravokutnika tog naziva. CSS dopušta da imenovana regija zauzima samo jedan čisti pravokutni blok, pa alat to provjerava dok upisujete i govori vam točno kada naziv još ne tvori valjani pravokutnik — umjesto da tiho proizvodi CSS koji će preglednik odbaciti.

Razmak između stupaca i razmak između redaka prema zadanim postavkama iznose 8 piksela i spajaju se u jedan redak gapa kad su jednaki, a prikaz mreže uživo uvijek odražava vaše tragove grid-template-columns i grid-template-rows, uključujući fiksne stupce u pikselima iz predloška poput bočnih tračnica od 200 piksela kod svetog grala. Izlaz koji se može kopirati pokriva obje strane: CSS blok spreman za vašu stilsku datoteku i odgovarajući HTML kostur s po jednim div-om s grid-area po imenovanoj regiji.

Grid i flexbox rješavaju različite probleme rasporeda, a css-flexbox-generator na ovom mjestu bolja je polazna točka za jednodimenzionalne rasporede — jedan redak ili stupac fleksibilnih stavki poput navigacijske trake ili hrpe kartica. Posegnite za ovim generatorom mreže umjesto toga kada trebate dvodimenzionalnu kontrolu, eksplicitne retke i stupce ili imenovane regije poput zaglavlje/glavna navigacija/sadržaj/podnožje; ta dva alata često završe na istoj stranici, mreža za ljusku stranice i flexbox unutar njezinih dijelova. Kao i svaki alat na ovom mjestu, u potpunosti se izvodi u vašem pregledniku — nema učitavanja na poslužitelj, nema korisničkog računa.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Polja za unos brojeva za 1–6 stupaca i redaka, plus odvojene kontrole za razmake između stupaca i redaka koje se kombiniraju u jednu vrijednost kada su jednake.
  • Način rada s imenovanim područjima: upišite naziv područja izravno u bilo koju ćeliju mreže uživo; alat gradi valjani niz grid-template-areas i upozorava kada nazivi ne tvore pravilne pravokutnike.
  • CSS blok koji se može kopirati (display: grid, grid-template-columns/rows, gap, grid-template-areas) plus odgovarajući HTML kostur s po jednim div-om s grid-area po imenovanoj regiji.

Ključne prednosti

✓ Upišite naziv izravno u bilo koju ćeliju mreže i podudarni nazivi spajaju se u jednu regiju grid-template-areas — bez odabira povlačenjem mišem i bez ručnog pisanja sintakse s navodnicima.
✓ Prikaz mreže uživo mijenja veličinu i boje pri svakoj promjeni, tako da vidite točne tragove stupaca i redaka i svaku imenovanu regiju prije nego što kopirate ijedan redak CSS-a.
✓ Predlošci poput klasičnog rasporeda svetog grala i uske bočne trake daju vam stvarnu, funkcionalnu deklaraciju grid-template-areas od koje možete krenuti umjesto prazne mreže.

Slučajevi upotrebe

  • • Sastavite klasičan izgled stranice "sveti gral" — cijelom širinom protegnuto zaglavlje i podnožje sa srednjim redom navigacija/sadržaj/bočna traka — upisivanjem naziva područja umjesto ručnog pisanja grid-template-areas.
  • • Kreirajte izgled stranice s postavkama ili administratorske nadzorne ploče s bočnom trakom fiksne širine uz prilagodljiv stupac sadržaja te kopirajte točan CSS i HTML kad prikaz uživo izgleda kako treba.
  • • Provjerite tvori li skup imenovanih područja doista valjane pravokutnike prije objave — alat ističe točne nazive koji bi onemogućili grid-template-areas u pregledniku.