CSS Grid-generator

Ställ in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.

Förinställningar
Objekt
CSS
HTML
Dra över rutnätet för att placera ett objekt.

Ditt rutnät byggs direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.

Vanliga frågor

Hur placerar jag objekt i rutnätet?

Klicka och dra över cellerna för att markera en rektangel – när du släpper blir det ett placerat objekt som sträcker sig över de kolumnerna och raderna. Varje objekt du ritar får en egen grid-column- och grid-row-regel i CSS-koden och en matchande div i HTML-koden. Objekt kan överlappa varandra, och det som ritas sist hamnar överst; använd × på ett objekt för att ta bort det.

Kan kolumner och rader ha olika storlekar?

Ja. Varje spår har sitt eget storleksfält, och du kan skriva vilket grid-värde som helst där – 1fr, 200px, auto, min-content eller minmax(120px, 1fr). Spår som delar samma storlek slås ihop till repeat() så att koden hålls kort. Kolumnavstånd (column gap) och radavstånd (row gap) ställs in var för sig, och slås ihop till ett enda gap när de är likadana.

Vad gör jag med den genererade koden?

Kopiera CSS- och HTML-koden sida vid sida. HTML-koden ger dig containern med en div per objekt, och CSS-koden definierar rutnätet och placerar ut varje objekt. Klistra in båda i ditt projekt så får du exakt samma layout som du ritade här.

CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.