CSS Gridガイド

design/css-grid-guide

CSS Gridの親子指定、列指定、サイズ関数をコピー可能なガイドテキストで確認できます。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

CSS Gridガイドでは、CSS Gridの親子指定、列指定、サイズ関数をコピー可能なガイドテキストで確認できます。
関連する観点として CSS Grid、グリッド、CSSレイアウトを確認し、結果をコピーして別の作業に使えます。

結果

--- 親要素 (container) ---
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 1rem;
grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

--- 子要素 (item) ---
grid-column: 1 / 3;       /* 1列目から3列目まで */
grid-row: 1 / -1;         /* 1行目から最後まで */
grid-area: header;        /* エリア名指定 */

--- よく使う列指定 ---
repeat(3, 1fr)            3等分
repeat(auto-fill, minmax(200px, 1fr))  レスポンシブ
200px 1fr 200px           サイドバー付き
repeat(12, 1fr)           12カラムグリッド

--- サイズ関数 ---
minmax(200px, 1fr)        最小200px、残り均等
auto-fill                 自動的に埋める
auto-fit                  自動的に伸ばす
fit-content(300px)        最大300pxまで

使い方

結果欄の親要素(container)ブロックで、display:grid、列、行、gap、エリア定義を確認します。
子要素(item)ブロックで、grid-column、grid-row、grid-area の書き方例を読みます。
よく使う列指定では、3等分、auto-fill、サイドバー付き、12カラムの例を比較します。
サイズ関数欄で minmax、auto-fill、auto-fit、fit-content の短い説明を確認し、必要ならCopyボタンを押します。

入力例・出力例

INPUT

repeat(3, 1fr)

OUTPUT

3等分

INPUT

200px 1fr 200px

OUTPUT

サイドバー付き

INPUT

fit-content(300px)

OUTPUT

最大300pxまで

よくある利用シーン

Gridの親子指定を、コード風のまとまったメモとしてコピーしたいとき。
12カラム、サイドバー、auto-fillなど列設計の候補を同じテキストで比べたいとき。
minmaxやfit-contentの短い説明を、実装中のコメント代わりに参照したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
CSS Grid、グリッド、CSSレイアウトの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

CSS Gridガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

CSS Gridで12カラムレイアウトを作る基本的な書き方を教えてください。

grid-template-columns: repeat(12, 1fr) とすると12等分のカラムが生成されます。各アイテムに grid-column: span 4 や grid-column: 1 / 5 のように指定して、何カラム分占有するかを制御します。gap でカラム間余白を一括管理できます。

minmax() 関数はどんなときに使いますか？

minmax(最小値, 最大値) で各トラックのサイズ範囲を指定します。grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) とすると200px以上確保しつつコンテナ幅で自動折り返しするレスポンシブグリッドが実現できます。

CSS Grid と Flexbox を同じプロジェクトで併用する場面を教えてください。

ページ全体の骨格（ヘッダー・サイドバー・メインエリア・フッター）はCSS Gridで2次元レイアウトを組み、その中のナビゲーションリンクやボタン群の水平配置はFlexboxが適しています。用途に応じた使い分けが推奨されます。

CSS Gridガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール

CSS Gridガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール