CSS Grid-generator

Opbyg visuelt et CSS Grid med lige store spor. Juster antallet af kolonner (1–12), rækker (1–12) og mellemrum (0–32px), og værktøjet renderer et live grid med nummererede celler samt et CSS-kodestykke på fire linjer, der bruger grid-template-columns: repeat(N, 1fr) og grid-template-rows: repeat(M, 1fr).

1. Træk kolonner-skyderen (1–12) for at indstille antallet af lige 1fr-kolonner. 2. Træk rækker-skyderen (1–12) for at indstille antallet af lige 1fr-rækker. 3. Træk mellemrum-skyderen (0–32px) for at indstille afstanden mellem celler. 4. Klik på Kopiér for at kopiere CSS-erklæringsblokken på fire linjer.

Outputtet er altid præcis fire linjer: display: grid; grid-template-columns: repeat({cols}, 1fr); grid-template-rows: repeat({rows}, 1fr); gap: {gap}px. Alle spor er lige brøkdele (1fr) — der er ingen understøttelse af blandede størrelser, minmax, auto-fit/auto-fill eller navngivne områder i dette værktøj.