CSS Grid to Tailwind

grid-template-columns: repeat(3, 1fr) becomes grid-cols-3. Custom tracks use arbitrary grid-cols values.

Custom tracks

When repeat(3, 1fr) is not enough, arbitrary grid-cols-[...] values are clearer than forcing an unrelated token.

Named areas

Template areas often stay in CSS longer than simple column counts. Convert the easy grids first; leave named areas for a dedicated pass.

Auto-fit patterns

Responsive auto-fit grids may need arbitrary values or a small custom CSS helper. Do not fake them with unrelated breakpoint column counts.

Try it

Open converter

.example { display: flex; gap: 1rem; padding: 1rem; }

Trust note: verify output visually. The converter is a draft helper for developers.