CSS Gridジェネレーター
等分トラックのCSS Gridをプリセット付きライブプレビューで作成。
ライブプレビュー
生成されたCSS
使い方
左側の列数・行数・ギャップ・単位を変更するか、プリセットを選ぶとグリッドが即座に更新されます。生成されるCSSはrepeat()とgapを使い、そのままスタイルシートへ貼り付けできます。
よくある質問
どのブラウザがCSS Gridに対応していますか？
すべてのモダンブラウザがCSS Gridに対応しています。古いブラウザ向けにはfeature queryでフォールバックを追加できます。
不等幅の列は使えますか？
はい。基本レイアウト生成後、grid-template-columnsを1fr 2frなどの比率に変更してください。