🔲 CSS Gridジェネレーター
1
2
3
4
5
6
生成されたCSS
列数(columns)・行数(rows)・列と行の間隔(gap)を指定するだけで、CSS Gridレイアウトのコードを生成するツールです。設定に応じたグリッドのプレビューをその場で確認しながらコードを作成できます。
使い方
- 列数と行数を入力します。
- 列の間隔(column-gap)と行の間隔(row-gap)を入力します。
- プレビューを確認しながら、生成されたCSSコードをコピーして使用します。
よくある質問
生成されるコードはどのプロパティを使っていますか?
display: grid、grid-template-columns、grid-template-rows、column-gap、row-gapという、CSS Gridレイアウトの基本的なプロパティを使用しています。
列や行のサイズを均等以外にできますか?
このツールは各列・各行を均等な幅(1fr)で生成します。特定の列だけ幅を変えたい場合は、生成されたgrid-template-columnsの値を手動で編集してください(例: 1fr 2fr 1fr)。
IE11でも使えますか?
生成されるコードは標準的なCSS Gridの記法です。IE11は独自の古い仕様のみサポートしており、このツールが生成するコードとは互換性がありません。モダンブラウザでの利用を想定しています。