Bygg CSS Grid-layouter visuellt — ställ in kolumner, rader och mellanrum och kopiera färdig CSS. Gratis, utan registrering.
Hur använder man CSS Grid-generator?
Ställ in antalet rader och kolumner.
Dra celler för att slå samman områden eller justera placeringen.
Kopiera den genererade CSS Grid-koden och använd den i ditt projekt.
Vanliga frågor om CSS Grid-generator
Vad är skillnaden mellan CSS Grid och Flexbox?
CSS Grid är för 2D-layouter (rader + kolumner), medan Flexbox är för 1D-layouter (rad eller kolumn). Grid passar bättre för komplexa sidlayouter.
Vad är fr-enheten?
fr (fraction) är en proportionell enhet som används i CSS Grid. Till exempel delar 1fr 2fr utrymmet i förhållandet 1:2. Den är mycket användbar för responsiva layouter.
Går det att bygga ett responsivt rutnät utan mediefrågor?
Ja. Genom att skriva repeat(auto-fit, minmax(240px, 1fr)) låser du bara kolumnens minsta bredd och låter webbläsaren räkna ut resten: kolumner tillkommer när fönstret växer och faller bort när det krymper, från mobil till skrivbord utan en enda brytpunkt. Observera att auto-fill lämnar tomma spår i det överblivna utrymmet medan auto-fit sträcker ut de befintliga för att fylla det, så de två skiljer sig när posterna är få.
Ett långt ord tänjer ut en rutnätskolumn och spräcker layouten.
Rutnätsobjekt har som standard minimistorleken auto och vägrar därför krympa under sitt innehåll — en lång adress eller ett obrytbart ord pressar upp hela kolumnen. min-width: 0 på det objektet låter rutnätet krympa det igen, och overflow-wrap: anywhere får den långa strängen att radbrytas. Att definiera spåret som minmax(0, 1fr) i stället för bara 1fr tar bort orsaken helt, vilket är skälet till att det är så vanligt.
Tips för att använda CSS Grid-generator effektivt
repeat(auto-fit, minmax(240px, 1fr)) ordnar om sig själv – helt utan media queries.
Använd gap i stället för marginaler så att sista kolumnen inte får överbliven luft.
Namnge områdena med grid-template-areas i komplexa layouter, så förblir koden läsbar.