CSS Grid-generator

Skapa rutnätslayouter visuellt med CSS Grid-generator

CSS Grid-generator är ett visuellt verktyg som låter dig designa CSS Grid-layouter direkt i webbläsaren. Genom att ställa in antalet kolumner och rader, definiera deras storlekar samt ange avstånden mellan dem, kan du snabbt bygga upp strukturen för ditt projekt. Du kan sedan klicka och dra över cellerna i verktyget för att placera ut specifika objekt i layouten.

Verktyget genererar automatiskt den tillhörande CSS- och HTML-koden för ditt designade rutnät, vilken du enkelt kan kopiera och klistra in direkt i ditt eget projekt. Detta gör det enkelt att visualisera hur olika storlekar på rader och kolumner påverkar layouten, samt att snabbt skapa prototyper eller generera kod utan att behöva skriva allt manuellt.

Inställningar för kolumner, rader och avstånd

För att bygga ditt rutnät erbjuder verktyget ett antal specifika inmatningsfält och parametrar:

• Kolumner: Du kan ställa in ett antal mellan 1 och 12 kolumner.
• Rader (Rows): Du kan ställa in ett antal mellan 1 och 12 rader.
• Kolumnavstånd: Ett värde mellan 0 och 48px.
• Radavstånd (Row gap): Ett värde mellan 0 och 48px.
• Kolumnstorlekar och Radstorlekar: Varje enskilt spår (kolumn eller rad) har ett eget storleksfält där du kan skriva in valfritt giltigt CSS-rutnätsvärde. Exempel på giltiga värden är 1fr, 200px, auto, min-content eller minmax(120px, 1fr).

Om du råkar skriva in ett ogiltigt värde i ett storleksfält, till exempel not-a-grid-track, kommer inmatningsfältet att markeras som ogiltigt. CSS-koden som genereras behåller dock det senast giltiga värdet i utmatningen.

Placering och hantering av objekt

När du har definierat dina rader och kolumner kan du placera ut objekt i rutnätet genom att klicka och dra muspekaren över cellerna för att markera ett rektangulärt område. När du släpper musknappen skapas ett placerat underobjekt som sträcker sig över de markerade kolumnerna och raderna.

Följande regler gäller för hantering av objekt i verktyget:

• Varje objekt som ritas upp får en egen grid-column- och grid-row-regel i den genererade CSS-koden, samt en matchande div i HTML-koden.
• Objekt kan överlappa varandra. Det objekt som ritas ut sist kommer att lägga sig överst.
• Om du vill ta bort ett specifikt objekt klickar du på dess "×"-knapp.
• Verktyget har stöd för maximalt 16 objekt samtidigt.
• Du kan använda knappen "Lägg till objekt" för att generera ett HTML-objekt, eller klicka på "Rensa objekt" för att tömma layouten helt, vilket resulterar i en tom HTML-container och 0 objekt.

Förinställningar för snabb layout

För att underlätta arbetet och snabbt skapa vanliga layoutstrukturer erbjuder verktyget ett antal färdiga förinställningar:

• Sidofält: Skapar en struktur anpassad för sidofältslayouter.
• Sidvänlig (Header & footer): Skapar en klassisk layout med sidhuvud och sidfot.
• Galleri: Denna förinställning genererar automatiskt 3 kolumner, 2 rader och 3 objekt.
• Instrumentpanel: Skapar en struktur anpassad för instrumentpaneler.

Dessa förinställningar är idealiska för dig som snabbt vill sätta upp en standardlayout utan att behöva konfigurera alla spår och objekt från grunden.

Effektiv kodgenerering och optimering

Verktyget genererar både CSS- och HTML-kod i realtid baserat på dina visuella val. Koden är optimerad för att hållas så ren och kortfattad som möjligt genom följande logik:

• Sammanslagning av spårstorlekar: Om flera spår (kolumner eller rader) delar exakt samma storlek, slås de automatiskt ihop med CSS-funktionen repeat() i den genererade CSS-koden.
• Sammanslagning av avstånd: Kolumnavstånd och radavstånd ställs in oberoende av varandra. Om du däremot anger exakt samma värde för båda avstånden, slås de ihop till en enda gap-egenskap i CSS-koden.

Den genererade HTML-koden innehåller en container-div för själva rutnätet samt individuella div-element för varje placerat objekt. CSS-koden innehåller reglerna för både rutnätets container och de enskilda objekten.

Integritet och lokal databehandling

När du använder detta verktyg kan du vara trygg med att din integritet respekteras. Ditt rutnät byggs direkt i din webbläsare. Inget av det du ställer in i verktyget 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.