CSS Grid-generator
Realtidsforhåndsvisning
Hvorfor bruge en visuel CSS Grid-generator?
CSS Grid er CSS's mest kraftfulde layoutsystem, men syntaksen har en stejl indlæringskurve. Med vores visuelle generator kan du justere gitteret med skydere og rullemenuer og se effekten af hver egenskab i realtid.
Realtids-gitterforhåndsvisning
Gitteret opdateres i realtid når du justerer kolonner, rækker, mellemrum og justering
Understøttelse af fr-enheden
Skabeloner bruger fr (brøk)-enheden til fleksible gitre der tilpasser sig beholderens størrelse
Klar til brug CSS
Eksportér et rent .container CSS-blok med grid-template-columns, rows, gap og align-items
Skab et CSS Grid-layout
Konfigurér kolonner og rækker
Angiv antallet af kolonner og rækker i gitteret med skydere
Vælg skabelon og mellemrum
Vælg kolonneskabelon (jævnt, fast+fleksibelt eller responsiv minmax) og justér mellemrummet
Kopiér CSS
Klik 'Kopiér CSS' for at få et komplet CSS-blok der kan indsættes direkte i dit stylesheet
CSS Grid-anvendelsesområder
Sidelayout
Skab header/sidebjælke/hovedindhold/sidefod-struktur med navngivne gitterområder
Dashboard
Skab komplekse dashboard-layouts med kort af varierende størrelse med grid-column og grid-row span
Galleri
Skab mursten- eller regulære gallerier der adaptivt tilpasser sig med auto-fill og minmax
Magasinlayout
Skab redaktionelle layouts med ujævne kolonner og fremhævet indhold der strækker sig over flere celler
Bedste praksis for CSS Grid
✓ Foretruk fr-enheden frem for procent
fr (brøk)-enheden fordeler tilgængeligt plads efter faste kolonner og undgår manuel beregning.
✓ Brug minmax() til responsive gitre
repeat(auto-fill, minmax(250px, 1fr)) skaber et responsivt gitter der automatisk justerer antallet af kolonner.
✓ Brug navngivne gitterområder
grid-template-areas med navngivne celler gør sidelayouts læsbare og lette at ændre.
✓ Forstå auto-fill vs. auto-fit
auto-fill skaber maksimalt antal spor (tomme inkluderet). auto-fit kollapser tomme spor og udvider eksisterende — normalt optimalt til kortgitre.
❓ Ofte stillede spørgsmål
Hvad er fr-enheden i CSS Grid?
fr står for 'brøkenhed'. 1fr repræsenterer en andel af det tilgængelige ledige plads i gitterbeholderen. repeat(3, 1fr) skaber 3 kolonner der deler jævnt på tilgængeligt plads.
Hvad er forskellen mellem CSS Grid og Flexbox?
Flexbox er endimensionalt — placerer elementer langs én akse (række eller kolonne). CSS Grid er todimensionalt — kan styre rækker og kolonner simultaneously, meget kraftfuldere til sidelayouts.
Hvad gør minmax()?
minmax(min, max) angiver et størrelsesinterval for et gitterspor. minmax(200px, 1fr) betyder at kolonnen er mindst 200px bred men kan vokse til at udfylde tilgængeligt plads.
Hvornår skal jeg bruge CSS Grid i stedet for Flexbox?
Brug Grid til todimensionelle layouts hvor du styrer rækker og kolonner simultaneously. Brug Flexbox til komponenters endimensionelle layouts som navigationslinjer.