CSS Grid-generator
Sanntidsforhåndsvisning
Hvorfor bruke en visuell CSS Grid-generator?
CSS Grid er CSS sitt mest kraftige oppsettystem, men syntaksen har en bratt læringskurve. Med vår visuelle generator kan du justere rutenettet med glidere og rullegardinmenyer og se effekten av hver egenskap i sanntid.
Sanntids-rutenettsforhåndsvisning
Rutenettet oppdateres i sanntid når du justerer kolonner, rader, mellomrom og justering
Støtte for fr-enheten
Maler bruker fr (brøk)-enheten for fleksible rutenett som tilpasser seg beholderens størrelse
Klar til bruk CSS
Eksporter et rent .container CSS-blokk med grid-template-columns, rows, gap og align-items
Lag et CSS Grid-oppsett
Konfigurer kolonner og rader
Angi antall kolonner og rader i rutenettet med glider
Velg mal og mellomrom
Velg kolonnemal (jevn, fast+fleksibel eller responsiv minmax) og juster mellomrommet
Kopier CSS
Klikk 'Kopier CSS' for å få et komplett CSS-blokk som kan limes inn direkte i stilarket ditt
CSS Grid-bruksområder
Sideoppsett
Lag topp/sidepanel/hovedinnhold/bunn-struktur med navngitte rutenettsområder
Dashboard
Lag komplekse dashboard-oppsett med kort av varierende størrelse med grid-column og grid-row span
Galleri
Lag murstein- eller regulære gallerier som adaptivt tilpasser seg med auto-fill og minmax
Bladoppsett
Lag redaksjonelle oppsett med ujevne kolonner og fremhevet innhold som strekker seg over flere celler
Beste praksis for CSS Grid
✓ Foretrekk fr-enheten fremfor prosent
fr (brøk)-enheten fordeler tilgjengelig plass etter faste kolonner uten manuell beregning.
✓ Bruk minmax() for responsive rutenett
repeat(auto-fill, minmax(250px, 1fr)) lager et responsivt rutenett som automatisk justerer antall kolonner.
✓ Bruk navngitte rutenettsområder
grid-template-areas med navngitte celler gjør sideoppsett lesbare og enkle å endre.
✓ Forstå auto-fill vs. auto-fit
auto-fill lager maksimalt antall spor (inkl. tomme). auto-fit kollapser tomme spor og utvider eksisterende — normalt optimalt for kortrutenett.
❓ Ofte stilte spørsmål
Hva er fr-enheten i CSS Grid?
fr står for 'brøkenhet'. 1fr representerer en andel av det tilgjengelige frie plassen i rutenetsbeholderen. repeat(3, 1fr) lager 3 kolonner som deler tilgjengelig plass jevnt.
Hva er forskjellen mellom CSS Grid og Flexbox?
Flexbox er endimensjonalt — plasserer elementer langs én akse (rad eller kolonne). CSS Grid er todimensjonalt — kan styre rader og kolonner simultaneously, mye kraftigere for sideoppsett.
Hva gjør minmax()?
minmax(min, max) angir et størrelsesintervall for et rutenetsspor. minmax(200px, 1fr) betyr at kolonnen er minst 200px bred men kan vokse for å fylle tilgjengelig plass.
Når bør jeg bruke CSS Grid i stedet for Flexbox?
Bruk Grid for todimensjonale oppsett der du styrer rader og kolonner simultaneously. Bruk Flexbox for komponenters endimensjonale oppsett som navigasjonslinjer.