CSS-rutenett-generator

Bygg visuelt et CSS-rutenett med spor i lik størrelse. Juster antallet kolonner (1–12), rader (1–12) og mellomrom (0–32px), så gjengir verktøyet et live rutenett med nummererte celler pluss et fire-linjers CSS-utdrag som bruker grid-template-columns: repeat(N, 1fr) og grid-template-rows: repeat(M, 1fr).

1. Dra kolonne-glidebryteren (1–12) for å angi antallet like 1fr-kolonner. 2. Dra rad-glidebryteren (1–12) for å angi antallet like 1fr-rader. 3. Dra mellomrom-glidebryteren (0–32px) for å sette avstanden mellom celler. 4. Klikk Kopier for å kopiere den fire-linjers CSS-erklæringsblokken.

Utdataene er alltid nøyaktig fire linjer: display: grid; grid-template-columns: repeat({cols}, 1fr); grid-template-rows: repeat({rows}, 1fr); gap: {gap}px. Alle spor er like brøkdeler (1fr) — dette verktøyet støtter ikke blandede størrelser, minmax, auto-fit/auto-fill eller navngitte områder.