CSS Gridガイド

design/css-grid-guide

CSS Gridの主要プロパティと値の早見表。レイアウト調整やアセット生成をワンストップで。

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

このツールでできること

CSS Gridガイドは、CSS Gridガイドの用途、入力、出力を確認しながら日常作業を短時間で処理するためのページです。
入力例と結果を見比べながら、入力条件と出力形式が利用先に合っているか確認することができます。
CSS Gridガイドでは、CSS Gridの主要プロパティと値の早見表。レイアウト調整やアセット生成をワンストップで。
デザイン・CSSの作業で必要になりやすい「CSS、レイアウト、UI部品の設定値作成」を、ページ上の入力欄からすぐに試せます。
関連する観点として 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まで

使い方

CSS Gridガイドの入力欄に、確認したい文字列や数値を入れます。
必要なオプションがある場合は、用途に合わせて選択します。
表示された結果を確認し、問題がなければコピーして利用先へ貼り付けます。

入力例・出力例

INPUT

CSS Gridガイド

OUTPUT

CSS Gridガイドの処理結果

入力条件と出力形式が利用先に合っているか確認する

よくある利用シーン

デザイン案を素早く試し、実装に貼りやすい値を作りたいとき
CSS Grid、グリッド、CSSレイアウトに関する確認を、手元のメモやスプレッドシートを開かずに短時間で済ませたいとき。
CSS Gridガイドの結果を、レビュー、公開前チェック、日々の作業メモに流用したいとき。

結果確認のポイント

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

注意点

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

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

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

FAQ

よくある質問

CSS Gridガイドは何に使えますか？

CSS GridガイドはCSS Gridガイドの用途、入力、出力を確認しながら日常作業を短時間で処理するための無料ツールです。入力内容を確認しながら、結果をコピーして日々の作業に使えます。

入力したデータは保存されますか？

多くの処理はブラウザ内で完結します。サーバー処理が必要な場合も、必要な処理の範囲に限って扱います。秘密情報や個人情報は入力前に必要性を確認してください。

結果を使う前に何を確認すべきですか？

入力条件と出力形式が利用先に合っているか確認する

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ガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

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

よくある質問

関連ツール