CSS Grid-generator

Indstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.

Forudindstillinger
Elementer
CSS
HTML
Træk hen over grid'et for at placere et element.

Dit grid opbygges direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvordan placerer jeg elementer på mit grid?

Klik og træk hen over cellerne for at markere et rektangel — når du slipper, bliver det til et placeret element, der spænder over de valgte søjler og rækker. 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 må gerne overlappe, og det element, der tegnes sidst, lægger sig øverst; brug × på et element for at fjerne det.

Kan søjler og rækker have forskellige størrelser?

Ja. Hvert spor (track) har sit eget størrelsesfelt, og du kan indtaste en hvilken som helst grid-værdi der — f.eks. 1fr, 200px, auto, min-content eller minmax(120px, 1fr). Spor, der deler samme størrelse, samles i repeat() for at holde koden kort. Søjlemellemrum (column-gap) og rækkemellemrum (row-gap) indstilles hver for sig, og slås sammen til et enkelt gap, hvis de er ens.

Hvad gør jeg med den genererede kode?

Kopier både CSS- og HTML-koden. HTML-koden giver dig containeren med én div pr. element, og CSS-koden definerer selve grid'et og placerer hvert element. Indsæt begge dele i dit projekt for at få præcis det layout, du har tegnet her.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Flexbox-generatorOpsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.