CSS Grid ビルダー
均等な列と行の数、および間隔を設定します。レイアウトをプレビューしてCSSをコピーできます。
CSS Grid ビルダー
ライブグリッドプレビュー
グリッド値を変更するとプレビューとCSSが更新されます。
使い方
使い方
- 列数と行数を1～12、間隔を0～64ピクセルに設定します。
- グリッドのライブプレビューを確認します。
- 生成されたCSSをスタイルシートにコピーします。
一般的なレイアウトをライブプレビュー
列数、行数、ピクセル間隔を変更するとプレビューが更新されます。各行列の位置に番号付きセルを表示します。
範囲を明確にしたコピー可能なCSS
出力は均等なminmax(0, 1fr)列と、最小高さ64 pxの行を使います。名前付き領域、不均等なトラック、ブレークポイント、個々のグリッド配置は編集しません。
ブラウザー内で生成
プレビューとCSSはこのページ内で生成され、サーバーへ送信されません。
よくある質問
あわせて知りたいこと
列ごとに幅を変えられますか？
いいえ。すべての列は同じfr幅です。異なるトラックサイズが必要な場合は、生成されたCSSを編集してください。
グリッド領域に名前を付けられますか？
いいえ。この簡易版で設定できるのは均等な行・列と間隔です。
間隔の単位は何ですか？
0～64の整数CSSピクセルです。