CSS Grid Generator

Postavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.

Predlošci
Stavke
CSS
HTML
Povucite preko mreže kako biste postavili stavku.

Vaša se mreža gradi izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Kako mogu postaviti stavke na mrežu?

Pritisnite i povucite preko ćelija kako biste označili pravokutnik — kada pustite, on postaje postavljena podređena stavka koja se proteže kroz te stupce i retke. Svaka stavka koju nacrtate dobiva vlastito grid-column i grid-row pravilo u CSS-u i odgovarajući div u HTML-u. Stavke se mogu preklapati, a ona koja je nacrtana kasnije nalazi se na vrhu; koristite × na stavci kako biste je uklonili.

Mogu li stupci i retci biti različitih veličina?

Da. Svaka staza (track) ima svoje polje za veličinu i tamo možete upisati bilo koju grid vrijednost — 1fr, 200px, auto, min-content ili minmax(120px, 1fr). Staze koje dijele istu veličinu spajaju se u funkciju repeat() kako bi izlaz ostao kratak. Razmak stupaca i razmak redaka postavljaju se zasebno, a spajaju se u jedan gap kada su jednaki.

Što trebam učiniti s generiranim kodom?

Kopirajte CSS i HTML usporedno. HTML vam daje kontejner s jednim div-om po stavci, a CSS definira mrežu i pozicionira svaku stavku. Zalijepite oboje u svoj projekt i dobit ćete isti raspored koji ste ovdje nacrtali.

Napisao i pregledao urednički tim BroBroGo.Zadnje ažuriranje:

Kako radi CSS Grid Generator

CSS Grid Generator je vizualni alat koji vam omogućuje da dizajnirate mrežni raspored (CSS grid layout) definiranjem stupaca i redaka, određivanjem njihovih veličina te postavljanjem razmaka između njih. Nakon što konfigurirate mrežu, možete jednostavno povući mišem preko ćelija kako biste postavili stavke unutar rasporeda. Alat automatski generira odgovarajući CSS i HTML kod za vašu dizajniranu mrežu, koji zatim možete kopirati i zalijepiti izravno u svoj projekt.

Ovaj je alat namijenjen svima koji žele brzo izraditi prototip CSS grid rasporeda, vizualizirati kako različite veličine stupaca i redaka utječu na izgled mreže, ili stvoriti strukture poput bočne trake, zaglavlja i podnožja, galerije ili nadzorne ploče bez potrebe za ručnim pisanjem koda.

Ulazni parametri za konfiguraciju mreže

Za izradu željenog rasporeda, alat podržava sljedeće ulazne vrijednosti:

  • Stupci: Broj stupaca koji možete postaviti mora biti između 1 i 12.
  • Redci (Rows): Broj redaka također mora biti u rasponu od 1 do 12.
  • Razmak stupaca: Vrijednost razmaka između stupaca može se postaviti u rasponu od 0 do 48px.
  • Razmak redaka (Row gap): Vrijednost razmaka između redaka može se postaviti u rasponu od 0 do 48px.
  • Veličine stupaca: Možete unijeti bilo koju važeću vrijednost za CSS grid, kao što su 1fr, 200px, auto, min-content ili minmax(120px, 1fr).
  • Veličine redaka: Podržava bilo koju važeću vrijednost za CSS grid, uključujući 1fr, 200px, auto, min-content ili minmax(120px, 1fr).
  • Postavljanje stavki: Označavanje pravokutnog područja povlačenjem miša preko ćelija unutar mreže.

Pravila ponašanja i posebni slučajevi

Tijekom rada s alatom primjenjuju se sljedeća pravila i tehnička ponašanja:

  • Postavljanje i uklanjanje stavki: Kada povučete miš preko ćelija i pustite ga, stvara se postavljena podređena stavka koja se proteže kroz odabrane stupce i retke. Svaka nacrtana stavka dobiva vlastito grid-column i grid-row pravilo u CSS-u te odgovarajući div element u HTML-u. Klikom na znak "×" na pojedinoj stavci ona se uklanja. Alat podržava maksimalno 16 stavki.
  • Preklapanje stavki: Stavke se unutar mreže mogu preklapati. Stavka koja je nacrtana kasnije pozicionira se i prikazuje na vrhu.
  • Veličine staza: Svaka pojedinačna staza (stupac ili redak) ima svoje polje za unos veličine. Ako unesete nevažeću vrijednost (na primjer not-a-grid-track), polje za unos bit će označeno kao nevažeće, ali će generirani CSS izlaz zadržati posljednju važeću vrijednost.
  • Optimizacija koda: Staze koje dijele potpuno istu veličinu automatski se spajaju i prikazuju pomoću funkcije repeat() u generiranom CSS-u. Slično tome, iako se razmak stupaca i razmak redaka postavljaju neovisno, oni se u izlaznom CSS-u sažimaju u jedno zajedničko svojstvo gap kada su im vrijednosti jednake.
  • Upravljanje stavkama: Opcija "Dodaj stavku" generira HTML stavku, dok opcija "Očisti stavke" uklanja sve elemente, što rezultira praznim HTML kontejnerom i brojačem od 0 stavki.

Brzi predlošci za raspored

Kako bi se ubrzao proces dizajniranja, alat nudi gotove predloške (presets) koji automatski konfiguriraju mrežu:

  • Bočna traka: Predložak za brzu izradu rasporeda s bočnom trakom.
  • Zaglavlje i podnožje: Predložak koji postavlja strukturu sa zaglavljem na vrhu i podnožjem na dnu.
  • Galerija: Ovaj predložak automatski generira raspored koji se sastoji od 3 stupca, 2 retka i 3 stavke.
  • Nadzorna ploča (Dashboard): Predložak prilagođen za brzu izradu sučelja nadzorne ploče.

Privatnost i obrada podataka

Vaša privatnost u potpunosti je zaštićena tijekom korištenja ovog alata. Vaša se mreža gradi izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo. Svi se izračuni i generiranje koda odvijaju lokalno na vašem uređaju.

Često postavljana pitanja (FAQ)

Kako mogu postaviti stavke na mrežu?

Pritisnite i povucite preko ćelija kako biste označili pravokutnik — kada pustite, on postaje postavljena podređena stavka koja se proteže kroz te stupce i retke. Svaka stavka koju nacrtate dobiva vlastito grid-column i grid-row pravilo u CSS-u i odgovarajući div u HTML-u. Stavke se mogu preklapati, a ona koja je nacrtana kasnije nalazi se na vrhu; koristite × na stavci kako biste je uklonili.

Mogu li stupci i retci biti različitih veličina?

Da. Svaka staza (track) ima svoje polje za veličinu i tamo možete upisati bilo koju grid vrijednost — 1fr, 200px, auto, min-content ili minmax(120px, 1fr). Staze koje dijele istu veličinu spajaju se u funkciju repeat() kako bi izlaz ostao kratak. Razmak stupaca i razmak redaka postavljaju se zasebno, a spajaju se u jedan gap kada su jednaki.

Što trebam učiniti s generiranim kodom?

Kopirajte CSS i HTML usporedno. HTML vam daje kontejner s jednim div-om po stavci, a CSS definira mrežu i pozicionira svaku stavku. Zalijepite oboje u svoj projekt i dobit ćete isti raspored koji ste ovdje nacrtali.

CSS Cubic Bezier GeneratorPovucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.Flexbox generatorPostavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.Generator sjena (Box Shadow)Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataIzgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.Generator zaobljavanja kutova (Border Radius)Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.CSS clamp() kalkulatorUnesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.