CSS Grid-generator
Grid-generatorn bygger grid-layouter utifrån antal kolumner och rader, avstånd, valfria egna grid-template-värden och justering av element, med förhandsvisning i realtid och CSS redo att kopiera.
Om verktyget
Grid-generatorn bygger grid-layouter utifrån antal kolumner och rader, avstånd, valfria egna grid-template-värden och justering av element, med förhandsvisning i realtid och CSS redo att kopiera.
Så använder du det
- Ställ in antal kolumner och rader.
- Justera kolumn- och radavstånden.
- Ange eventuellt egna mallar som 200px 1fr 1fr.
- Välj justify-items och align-items och klicka sedan på Copy CSS.
Bra att veta
- Enheten fr delar upp det lediga utrymmet: 1fr 2fr gör den andra kolumnen dubbelt så bred som den första.
- repeat(3, 1fr) är en kortform för tre lika breda kolumner.
- column-gap och row-gap anger mellanrummen mellan spåren.
- Grid är tvådimensionellt och styr rader och kolumner tillsammans.
- repeat(auto-fit, minmax(200px, 1fr)) skapar ett responsivt rutnät utan mediafrågor.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur skapar jag ett rutnät med 3 kolumner i CSS?
Använd display: grid; grid-template-columns: repeat(3, 1fr); på containern och lägg till gap för mellanrum.
Vad betyder fr i CSS Grid?
fr är en andel av det lediga utrymmet i grid-containern.
CSS Grid eller Flexbox?
Grid passar bäst för tvådimensionella layouter som sidstrukturer och kortrutnät; Flexbox för endimensionella rader eller kolumner.
Hur gör jag ett responsivt rutnät utan mediafrågor?
Använd grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); då bryts kolumnerna automatiskt efter tillgängligt utrymme.