CSS Grid-generator

Bygg visuellt ett CSS Grid med spår av samma storlek. Justera antalet kolumner (1–12), rader (1–12) och gap (0–32px), så återger verktyget ett live-grid med numrerade celler plus ett fyra rader långt CSS-utdrag som använder grid-template-columns: repeat(N, 1fr) och grid-template-rows: repeat(M, 1fr).

1. Dra kolumnreglaget (1–12) för att ställa in antalet lika stora 1fr-kolumner. 2. Dra radreglaget (1–12) för att ställa in antalet lika stora 1fr-rader. 3. Dra gap-reglaget (0–32px) för att ställa in avståndet mellan cellerna. 4. Klicka på Kopiera för att kopiera det fyra rader långa CSS-deklarationsblocket.

Utdatan är alltid exakt fyra rader: display: grid; grid-template-columns: repeat({cols}, 1fr); grid-template-rows: repeat({rows}, 1fr); gap: {gap}px. Alla spår är lika bråkdelar (1fr) — det finns inget stöd för blandade storlekar, minmax, auto-fit/auto-fill eller namngivna områden i detta verktyg.