De CSS Grid à Tailwind

grid-template-columns: repeat(3, 1fr) → grid-cols-3. Les pistes custom utilisent des valeurs arbitraires.

Les grilles régulières se convertissent sans mauvaise surprise : grid-template-columns: repeat(3, 1fr) donne grid-cols-3. Dès que les pistes mélangent des unités ou des tailles fixes, il faut recourir à des valeurs arbitraires, nettement moins lisibles. Quant aux grilles construites avec des zones nommées, elles gagnent souvent à rester écrites en CSS.

Grilles explicites

grid-template-columns en fr fixes mappe souvent vers grid-cols-*. Fractions rares ou minmax complexe demandent brackets ou CSS.

Zones nommées

grid-template-areas est rarement 1:1 en utilitaires. Gardez les zones en CSS ou simplifiez le markup.

Gap et auto-flow

gap-* et grid-flow-* couvrent beaucoup du quotidien sans toucher lignes/colonnes à la main.

Essayer

Ouvrir le convertisseur

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

Note de confiance : vérifiez le rendu. Le convertisseur est une aide de brouillon.