CSS Grid Generator

Postavite kolone i redove, prevucite preko ćelija da postavite stavke i kopirajte CSS mreže sa odgovarajućim HTML-om jednim klikom.

Predlošci
Stavke
CSS
HTML
Prevucite preko mreže da postavite stavku.

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

Česta pitanja

Kako da postavim stavke na mrežu?

Pritisnite i prevucite preko ćelija da označite pravougaonik — kada pustite, to postaje postavljena podređena stavka koja se proteže kroz te kolone i redove. Svaka stavka koju nacrtate dobija sopstveno grid-column i grid-row pravilo u CSS-u i odgovarajući div u HTML-u. Stavke se mogu preklapati, pri čemu ona koja je nacrtana kasnije dolazi na vrh; koristite × na stavci da je uklonite.

Mogu li kolone i redovi biti različitih veličina?

Da. Svaka traka ima svoje polje za veličinu i tu možete unijeti bilo koju grid vrijednost — 1fr, 200px, auto, min-content ili minmax(120px, 1fr). Trake koje dijele istu veličinu se spajaju u repeat() kako bi izlaz ostao kratak. Razmak između kolona (column gap) i razmak između redova (row gap) se postavljaju zasebno, a spajaju se u jedan gap kada su jednaki.

Šta da radim sa generisanim kodom?

Kopirajte CSS i HTML uporedo. HTML vam daje kontejner sa jednim div-om po stavci, a CSS definiše mrežu i pozicionira svaku stavku. Zalijepite oboje u svoj projekat i dobićete isti raspored koji ste ovdje nacrtali.

Napisao i pregledao urednički tim BroBroGo.Zadnji put ažurirano:

Kako funkcioniše CSS Grid Generator

CSS Grid Generator je vizuelni alat koji vam omogućava da dizajnirate raspored CSS mreže definisanjem broja kolona i redova, određivanjem njihovih veličina, te postavljanjem razmaka između njih. Nakon što definišete strukturu, možete jednostavno prevući mišem preko mreže kako biste postavili stavke unutar rasporeda. Alat automatski generiše odgovarajući CSS i HTML kod za vašu dizajniranu mrežu, koji zatim možete kopirati i zalijepiti direktno u svoj vlastiti projekat.

Ovaj alat je namijenjen svima koji žele brzo napraviti prototip CSS grid rasporeda, vizualizirati kako različite veličine kolona i redova utiču na izgled mreže, ili generisati potreban CSS i HTML kod bez ručnog pisanja. Također je koristan za brzo kreiranje struktura kao što su bočna traka, zaglavlje i podnožje, galerija ili kontrolna tabla.

Ulazni parametri za konfiguraciju mreže

Da biste kreirali željeni raspored, alat nudi nekoliko ulaznih polja i interaktivnih opcija:

  • Kolone: Broj kolona koji možete postaviti mora biti između 1 i 12.
  • Redovi Broj redova koji možete postaviti je također između 1 i 12.
  • Razmak između kolona: Vrijednost razmaka izražena u pikselima, u rasponu od 0 do 48px.
  • Razmak između redova Vrijednost razmaka izražena u pikselima, u rasponu od 0 do 48px.
  • Veličine kolona: 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 redova: 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 pravougaonog područja unutar mreže vrši se prevlačenjem miša preko ćelija.

Pravila ponašanja i specifičnosti alata

Prilikom rada u alatu primjenjuju se sljedeća pravila i tehnička ponašanja:

  • Kreiranje stavki: Kada pritisnete i prevučete mišem preko ćelija, otpuštanjem miša kreirate postavljenu podređenu stavku koja se proteže kroz selektovane kolone i redove.
  • Generisanje koda za stavke: Svaka nacrtana stavka dobija sopstveno grid-column i grid-row pravilo u CSS-u, kao i odgovarajući div element u HTML-u.
  • Preklapanje: Stavke se mogu preklapati unutar mreže. Stavka koja je nacrtana kasnije pozicionira se na vrh.
  • Uklanjanje stavki: Klikom na oznaku "×" na samoj stavci možete je ukloniti iz rasporeda.
  • Ograničenje broja stavki: Alat podržava maksimalno 16 stavki.
  • Upravljanje stavkama: Opcija "Dodaj stavku" generiše HTML stavku, dok opcija "Očisti stavke" rezultira praznim HTML kontejnerom i brojem od 0 stavki.
  • Validacija unosa: Svaka traka (kolona ili red) ima svoje polje za veličinu. Ako unesete nevažeću vrijednost (na primjer not-a-grid-track), polje za unos će biti označeno kao nevažeće, ali će generisani CSS izlaz zadržati posljednju važeću vrijednost.

Optimizacija generisanog CSS i HTML koda

Alat automatski optimizuje izlazni kod kako bi bio što kraći i čistiji:

  • Spajanje veličina pomoću repeat(): Ako više traka (kolona ili redova) dijeli istu veličinu, one se u izlaznom CSS-u automatski spajaju u funkciju repeat().
  • Spajanje razmaka u gap: Razmak između kolona i razmak između redova postavljaju se nezavisno. Međutim, ako su ove dvije vrijednosti jednake, one se u izlaznom CSS-u sažimaju u jedno zajedničko svojstvo gap.

Kao rezultat rada, alat generiše dva ključna izlaza:

  1. CSS: Kod za kontejner mreže i za svaku pojedinačnu postavljenu stavku.
  2. HTML: Kod za kontejner mreže koji sadrži div elemente za svaku postavljenu stavku.

Korištenje gotovih predložaka

Za brži početak rada, alat nudi predefinisane predloške koji automatski postavljaju strukturu mreže:

  • Bočna traka: Brzo postavljanje strukture sa bočnim panelom.
  • Zaglavlje i podnožje: Standardni raspored sa gornjim i donjim sekcijama.
  • Galerija: Ovaj predložak automatski generiše raspored sa 3 kolone, 2 reda i 3 stavke.
  • Kontrolna tabla: Kompleksniji raspored pogodan za aplikativne interfejse.

Privatnost i obrada podataka

Vaša privatnost je u potpunosti zaštićena tokom korištenja ovog alata. Vaša mreža se gradi direktno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Često postavljana pitanja (FAQ)

Kako da postavim stavke na mrežu?

Pritisnite i prevucite preko ćelija da označite pravougaonik — kada pustite, to postaje postavljena podređena stavka koja se proteže kroz te kolone i redove. Svaka stavka koju nacrtate dobija sopstveno grid-column i grid-row pravilo u CSS-u i odgovarajući div u HTML-u. Stavke se mogu preklapati, pri čemu ona koja je nacrtana kasnije dolazi na vrh; koristite × na stavci da je uklonite.

Mogu li kolone i redovi biti različitih veličina?

Da. Svaka traka ima svoje polje za veličinu i tu možete unijeti bilo koju grid vrijednost — 1fr, 200px, auto, min-content ili minmax(120px, 1fr). Trake koje dijele istu veličinu se spajaju u repeat() kako bi izlaz ostao kratak. Razmak između kolona (column gap) i razmak između redova (row gap) se postavljaju zasebno, a spajaju se u jedan gap kada su jednaki.

Šta da radim sa generisanim kodom?

Kopirajte CSS i HTML uporedo. HTML vam daje kontejner sa jednim div-om po stavci, a CSS definiše mrežu i pozicionira svaku stavku. Zalijepite oboje u svoj projekat i dobićete isti raspored koji ste ovdje nacrtali.

CSS Cubic Bezier GeneratorPovucite dvije ručice da oblikujete krivu ubrzanja, posmatrajte kretanje tačke u poređenju sa ravnomjernim i kopirajte cubic-bezier() vrijednost.Flexbox GeneratorPostavite flex kontejner i njegove stavke pomoću vizuelnih kontrola, posmatrajte promjene uživo i kopirajte CSS jednim klikom.Generator za Box ShadowPovucite klizače da oblikujete box-shadow, slažite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataKreirajte linearni, radijalni ili konusni gradijent, dodajte tačke prekida boje i postavite smjer, a zatim kopirajte CSS jednim klikom.Generator za Border RadiusZaoblite svaki ugao pomoću klizača, oblikujte organske mrlje pomoću eliptičnog režima i odmah kopirajte CSS.Kalkulator za CSS clamp()Unesite veličinu za male i velike ekrane i dobićete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.