CSS Grid から Tailwind へ

grid-template-columns: repeat(3, 1fr) → grid-cols-3。カスタムトラックは任意値。

均等なグリッドの変換は素直で、grid-template-columns: repeat(3, 1fr) は grid-cols-3 になります。単位が混ざるトラックや固定幅は任意値になり、名前付きエリアは CSS のまま残す判断も現実的です。

明示テンプレート

固定 fr の grid-template-columns は多くの場合 grid-cols-*。珍しい分数や複雑な minmax は brackets か CSS。

名前付きエリア

grid-template-areas はほぼ 1:1 にならない。エリアは CSS に残すかマークアップを簡略化。

gap と auto-flow

gap-* と grid-flow-* で日常の多くをカバーし、行／列を手で触らない。

試す

コンバーターを開く

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

信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。