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.

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.