Hopp til innhold

CSS Grid Generator

Bygg CSS Grid-oppsett visuelt med live forhåndsvisning. Angi kolonner, rader, gap og justering. Kopier CSS-kode. Gratis nettverktøy.

Forhåndsvisning

CSS-utdata
 

Hva er CSS Grid?

CSS Grid Layout er et todimensjonalt layoutsystem som lar deg lage komplekse rutenettbaserte oppsett. I motsetning til Flexbox, som er endimensjonal, kan Grid håndtere både kolonner og rader samtidig, noe som gjør det ideelt for sideoppsett.

Grid-maler

grid-template-columns og grid-template-rows definerer sporsstørrelsen for grid-kolonner og -rader. Bruk 1fr for like fraksjoner, auto for innholdsbasert størrelse, eller faste verdier som 200px. Funksjonen repeat() forenkler repeterende mønstre.

Personvern

All grid-generering kjøres 100 % i nettleseren din. Ingen data sendes til noen server.