CSS Grid-generator
Realtidsförhandsvisning
Varför använda en visuell CSS Grid-generator?
CSS Grid är det mest kraftfulla layoutsystemet i CSS, men syntaxen har en brant inlärningskurva. Med vår visuella generator kan du justera gridet med reglage och rullgardinsmenyer och se effekten av varje egenskap i realtid.
Realtids-gridförhandsvisning
Gridet uppdateras i realtid när du justerar kolumner, rader, gap och justering
Stöd för fr-enheten
Mallar använder fr (bråk)-enheten för flexibla grids som anpassar sig till behållarens storlek
Redo att använda CSS
Exportera ett rent .container CSS-block med grid-template-columns, rows, gap och align-items
Skapa en CSS Grid-layout
Konfigurera kolumner och rader
Ange antalet kolumner och rader i gridet med reglage
Välj mall och gap
Välj kolumnmall (jämnt, fast+flexibelt eller responsiv minmax) och justera avståndet
Kopiera CSS
Klicka på 'Kopiera CSS' för att få ett komplett CSS-block som du kan klistra in i din stilmall
CSS Grid-användningsområden
Sidlayout
Skapa header/sidofält/huvudinnehåll/sidfotstruktur med namngivna gridområden
Dashboard
Skapa komplexa dashboardlayouter med kort av varierande storlek med grid-column och grid-row span
Galleri
Skapa stenmurs- eller regelbundna gallerier som adaptivt anpassar sig med auto-fill och minmax
Tidskriftslayout
Skapa redaktionella layouter med ojämna kolumner och utvald innehåll som sträcker sig över flera celler
Bästa praxis för CSS Grid
✓ Föredra fr-enheten framför procent
fr (bråk) -enheten delar tillgängligt utrymme efter fasta kolumner och undviker manuell beräkning.
✓ Använd minmax() för responsiva grids
repeat(auto-fill, minmax(250px, 1fr)) skapar ett responsivt grid som automatiskt justerar antal kolumner.
✓ Använd namngivna gridområden
grid-template-areas med namngivna celler gör sidlayouter läsbara och enkla att ändra.
✓ Förstå auto-fill kontra auto-fit
auto-fill skapar maximalt antal spår (tomma inkluderade). auto-fit kollapsar tomma spår och vidgar befintliga — oftast optimallt för kortgrids.
❓ Vanliga frågor
Vad är fr-enheten i CSS Grid?
fr står för 'fraktionell enhet'. 1fr representerar en del av det tillgängliga lediga utrymmet i gridbehållaren. repeat(3, 1fr) skapar 3 kolumner som delar lika på tillgängligt utrymme.
Vad är skillnaden mellan CSS Grid och Flexbox?
Flexbox är endimensionellt — placerar objekt längs en axel (rad eller kolumn). CSS Grid är tvådimensionellt — kan styra rader och kolumner simultaneously, mycket kraftfullare för sidlayouter.
Vad gör minmax()?
minmax(min, max) anger ett storleksintervall för ett gridspår. minmax(200px, 1fr) innebär att kolumnen är minst 200px bred men kan växa för att fylla tillgängligt utrymme.
När ska jag använda CSS Grid istället för Flexbox?
Använd Grid för tvådimensionella layouts i vilka du styr rader och kolumner simultaneously. Använd Flexbox för komponenters endimensionella layouts som navigeringsfält. Moderna layouter använder ofta båda.