CSS Gridジェネレーター

設定を動かしながら、レスポンシブなグリッドの見た目とCSSを確認できます。

グリッド設定
3列
2行
ライブプレビュー
生成されたCSS
使い方のヒント
スマートフォン対応にはどちらが向いていますか？
カード幅を基準に自動で折り返す「自動折り返し」が便利です。固定列数は厳密な表形式に向いています。
生成コードはそのまま使えますか？
対象要素のクラス名を .grid-container にするか、コード内のセレクターを変更してください。