CSS Grid-generator
Visuell CSS Grid-layoutbyggare med kodgenerering
Layoutinställningar
Färdiga layouter
Placering per objekt
Välj ett objekt i förhandsvisningen eller listan för att redigera dess egenskaper.
Snabbreferens för CSS Grid
Rutnätsspår
Använd fr-enheter för flexibla spår, px/% för fasta och auto för spår som anpassas efter innehållet.
Funktionen repeat()
repeat(3, 1fr) är en kortform för 1fr 1fr 1fr. Använd auto-fill eller auto-fit för responsiva rutnät.
Objekt som spänner över flera spår
Använd span N för att spänna över N spår, eller 1 / -1 för att spänna över alla kolumner/rader.
Liveförhandsvisning
Linjeetiketterna visar de första 200 spåren. Hela din CSS och layout bevaras.
Genererad CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Ändra inställningarna eller välj ett objekt. Förhandsvisningen och CSS-koden uppdateras tillsammans.
Om CSS Grid-generator
CSS Grid-generator är ett interaktivt visuellt verktyg för att designa och generera CSS Grid-layouter. CSS Grid Layout är det mest kraftfulla tvådimensionella layoutsystemet i CSS och låter dig definiera både kolumner och rader samtidigt. Verktyget ger ett praktiskt sätt att lära sig, experimentera med och generera produktionsklar CSS Grid-kod.
Viktiga funktioner
- Full kontroll över grid-template-columns och grid-template-rows med fri inmatning
- Snabbknappar för kolumner och rader för snabb prototyping med lika stora spår
- Separata reglage för row-gap och column-gap för exakt kontroll över avstånden
- Justeringsreglage för justify-items och align-items
- Placering av grid-column och grid-row för varje objekt med snabbknappar för värden
- Egna etiketter för rutnätsobjekt för att visualisera semantiska layoutområden
- Numrerade objekt i pastellfärger med indikatorer för rutnätslinjernas nummer
- Färdiga layouter: Bloggsida, Dashboard, Bildgalleri och Landningssida
- Automatiskt genererad CSS-kod med kopiering med ett klick
- Fullt stöd för mörkt läge
Så fungerar CSS Grid
CSS Grid fungerar genom att definiera en rutnätsbehållare med explicita eller implicita spår (kolumner och rader). Objekt i behållaren placeras automatiskt i celler, eller så placerar du dem uttryckligen med egenskaperna grid-column och grid-row för att sträcka dem över flera spår. Enheten fr motsvarar en andel av det tillgängliga utrymmet, vilket gör responsiva layouter enkla. Funktionen repeat() förenklar upprepade spårdefinitioner, och funktioner som minmax() samt auto-fill/auto-fit ger riktigt responsiva rutnät utan mediefrågor.
Vanliga layoutmönster med CSS Grid
CSS Grid passar utmärkt för layouter på sidnivå, till exempel bloggdesigner med sidhuvud, sidofält, innehåll och sidfot, dashboardgränssnitt med navigering, huvudinnehåll och widgetytor, bildgallerier där objekt sträcker sig över flera rader och kolumner för en murliknande effekt samt landningssidor med hero-sektioner i full bredd, flerkolumniga funktionsrutnät och ytor för uppmaningar till handling. Använd mallknapparna för att direkt utforska mönstren.
Grid jämfört med Flexbox
Flexbox är gjort för endimensionella layouter (en enda rad eller kolumn), medan CSS Grid är starkt på tvådimensionella layouter där du behöver kontrollera båda axlarna samtidigt. Grid passar bäst för sidlayouter och komplexa komponentuppställningar, medan Flexbox är idealiskt för att fördela utrymme mellan objekt på en enda linje. Många moderna designer använder båda tillsammans, med Grid för den övergripande sidstrukturen och Flexbox för justering på komponentnivå.
Vem är verktyget till för?
- Webbutvecklare som bygger sidlayouter med CSS Grid
- Frontend-utvecklare som prototypar responsiva rutnätssystem
- UI/UX-designers som visualiserar rutnätsstrukturer före implementeringen
- Studenter som lär sig tvådimensionella CSS-layouttekniker
- Lärare som undervisar i CSS Grid-begrepp på workshoppar eller lektioner
- Alla som snabbt behöver generera CSS Grid-kod till sina webbprojekt