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.

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.