CSS Grid Generator
Bygg CSS Grid-layouter visuellt med liveförhandsvisning. Ange kolumner, rader, gap och justering. Kopiera CSS-kod. Gratis onlineverktyg.
Förhandsvisning
CSS-utdata
Referens
Vad är CSS Grid?
CSS Grid Layout är ett tvådimensionellt layoutsystem som låter dig skapa komplexa rutnätsbaserade layouter. Till skillnad från Flexbox som är endimensionellt kan Grid hantera både kolumner och rader samtidigt, vilket gör det idealiskt för sidlayouter.
Grid-mallar
grid-template-columns och grid-template-rows definierar spårstorleken för grid-kolumner och -rader. Använd 1fr för lika fraktioner, auto för innehållsbaserad storlek, eller fasta värden som 200px. Funktionen repeat() förenklar repetitiva mönster.
Integritet
All grid-generering körs 100 % i din webbläsare. Ingen data skickas till någon server.