CSS Grid-generator

Definer kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.

Forhåndsinnstillinger
Elementer
CSS
HTML
Dra over rutenettet for å plassere et element.

Rutenettet ditt bygges direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hvordan plasserer jeg elementer på rutenettet?

Klikk og dra over rutene for å markere et rektangel — når du slipper, blir det til et plassert underelement som spenner over disse kolonnene og radene. Hvert element du tegner får sin egen grid-column- og grid-row-regel i CSS-koden og en tilsvarende div i HTML-koden. Elementer kan overlappe, og det som tegnes sist legger seg øverst; bruk × på et element for å fjerne det.

Kan kolonner og rader ha forskjellige størrelser?

Ja. Hvert spor har sitt eget størrelsesfelt, og du kan skrive inn en hvilken som helst grid-verdi der — f.eks. 1fr, 200px, auto, min-content eller minmax(120px, 1fr). Spor som deler samme størrelse slås sammen med repeat() for å holde koden kort. Kolonneavstand og radavstand settes hver for seg, og slås sammen til en enkelt gap-verdi når de er like.

Hva gjør jeg med den genererte koden?

Kopier CSS- og HTML-koden side om side. HTML-koden gir deg containeren med én div per element, og CSS-koden definerer rutenettet og posisjonerer hvert element. Lim begge inn i prosjektet ditt for å få nøyaktig samme layout som du tegnet her.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.