CSSグリッドジェネレーター
CSSグリッドレイアウトを視覚的に作成します。行、列、間隔を設定して、生成されたCSSとHTMLをコピーできます。
CSS
機能
行と列を設定
ドラッグでサイズ変更
セルの結合
余白を調整
CSS と HTML を同時に生成
使い方
1. 行と列の数を設定します。
2. 行の高さと列の幅を調整します（fr, px, auto）。
3. グリッドの間隔を設定します。
4. 生成されたCSSとHTMLをコピーします。
このツールについて
CSS Grid は行と列を同時にレイアウトできるので、ギャラリー、ダッシュボード、ページ構造に最適です。このジェネレーターはグリッドコンテナを視覚的に設定できます。必要な列数と行数、その間の間隔、列の幅の分け方を選びます。1fr で均等、自動サイズ、長い内容で列が広がるのを防ぐ minmax(0, 1fr)、固定 100px のトラックから選べます。プレビューでアイテムがトラックにどう流れ込むかが分かり、CSS は repeat() を使ってコンパクトで読みやすく出力されます。これをたたき台としてコピーし、個々のアイテムは自分のスタイルシートで grid-column と grid-row を使って配置してください。
よくある質問
fr 単位とは何ですか？
fr はグリッドコンテナの空きスペースの割合を表します。3列すべてが 1fr なら均等に分け、2fr 1fr なら1列目が2列目の2倍の幅になります。
1fr ではなく minmax(0, 1fr) を使うのはなぜですか？
1fr のトラックは内容の最小サイズより小さくなれないため、長い単語や幅の広い表で列が広がることがあります。minmax(0, 1fr) なら列が縮めるので、均等な列を本当に均等に保てます。
グリッドをレスポンシブにするには？
よく使われるのは grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) です。幅に応じて最小 240px の列をできるだけ多く並べ、入りきらない分はメディアクエリなしで次の行に回します。
アイテムを複数の列にまたがらせるには？
アイテムに grid-column: span 2 を付けると2列分、grid-column: 1 / -1 で全幅にわたります。行の場合も grid-row で同じように指定します。
gap、column-gap、row-gap の違いは？
column-gap は列の間、row-gap は行の間の余白で、gap はその両方をまとめた省略形です。余白はトラックの間にだけ入り、グリッドの外側には付きません。
関連ツール
CSSボックスシャドウ生成
スライダーでCSS box-shadowプロパティを視覚的に生成します。リアルタイムプレビューを確認してCSSコードをコピーできます。...
CSSグラデーション生成
CSSの線形、放射状、円錐グラデーションを視覚的に作成します。複数のカラーストップを追加してCSSをコピーできます。...
CSSボーダーラジアス生成
CSS border-radiusを視覚的に作成 — 4つの角を個別にまたは一括で制御できます。リアルタイムプレビュー付き。...
CSS Flexboxプレイグラウンド
CSS Flexboxを学習・実験できます。コンテナのプロパティを調整して、レイアウトの変化をリアルタイムで確認できます。...
年齢計算
生年月日を入力すると、年・月・日単位の正確な年齢、生存日数・時間・分の合計、次の誕生日までの日数が表示されます。...
カウントダウンタイマー
将来の日付と時刻を選択すると、日・時間・分・秒のリアルタイムカウントダウンが表示されます — イベント、試験、祝日、製品リリースに最適。...
ローン計算
ローン金額、金利、期間を入力すると、月々の返済額、総利息、完全な返済スケジュールが表示されます。...
複利計算
複利の力を体感できます。初期預金、毎月の積立額、年間利回り、投資期間を設定してください。...