CSS Grid Generator

Določite stolpce in vrstice, povlecite čez celice za postavitev elementov ter z enim klikom kopirajte CSS mreže z ustreznim HTML-jem.

Prednastavitve
Elementi
CSS
HTML
Povlecite čez mrežo, da postavite element.

Vaša mreža se ustvari neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.

Pogosta vprašanja

Kako postavim elemente na mrežo?

Pritisnite in povlecite čez celice, da označite pravokotnik — ko spustite, postane to umeščen podrejeni element, ki se razteza čez te stolpce in vrstice. Vsak element, ki ga narišete, dobi svoje pravilo grid-column in grid-row v CSS ter ustrezen div v HTML. Elementi se lahko prekrivajo, pri čemer je tisti, ki je narisan kasneje, na vrhu; za odstranitev elementa kliknite ×.

Ali so lahko stolpci in vrstice različnih velikosti?

Da. Vsaka vrstica ali stolpec (track) ima svoje polje za velikost, kamor lahko vnesete katero koli vrednost mreže — 1fr, 200px, auto, min-content ali minmax(120px, 1fr). Vrstice ali stolpci z enako velikostjo so združeni v funkcijo repeat(), da ostane koda kratka. Razmik med stolpci in razmik med vrsticami se nastavljata ločeno, če pa sta enaka, se združita v en sam gap.

Kaj naj storim z generirano kodo?

Kopirajte kodi CSS in HTML vzporedno. HTML vam ponuja vsebnik z enim div-om na element, CSS pa definira mrežo in pozicionira vsak element. Obe prilepite v svoj projekt in dobili boste enako postavitev, kot ste jo narisali tukaj.

Generator za CSS Cubic BezierPovlecite ročici, da oblikujete krivuljo prehoda, opazujte gibanje pike v primerjavi z enakomernim in kopirajte vrednost cubic-bezier().Generator za FlexboxNastavite flex vsebnik in njegove elemente z vizualnimi kontrolami, opazujte odziv postavitve v živo in kopirajte CSS z enim klikom.Generator za box-shadowPovlecite drsnike, da oblikujete senco elementa, zložite plasti za večjo globino in takoj kopirajte končni CSS.Generator prelivovUstvarite linearen, radialen ali stožčast preliv, dodajte barvne točke, določite smer in kopirajte CSS z enim klikom.Generator za border-radiusZaoblite vsak kot z drsniki, oblikujte organske mehurčke z eliptičnim načinom in takoj kopirajte CSS.Kalkulator za CSS clamp()Vnesite velikost za male in velike zaslone ter pridobite tekočo vrednost clamp(), ki se vmes gladko prilagaja — za velikosti pisav, paddinge, margine ali gape.