CSS グリッド プレイグラウンド テンプレート列、行、ギャップのインタラクティブなコントロールを備えたビジュアル CSS グリッド ビルダー。

What Is CSS グリッド プレイグラウンド?

CSS Grid Playgroundは、CSSで最も強力なレイアウトシステムであるCSS Gridレイアウトのインタラクティブビルダーです。Gridでは、行と列の両方を同時に二次元的に制御できるため、複雑なページレイアウトに最適です。このツールには2つのモードがあります。自動モードは、シンプルな等幅グリッド用にrepeat(n, 1fr)を使用し、手動モードでは、1fr 2fr 1frまたは200px auto 200pxのようなカスタムテンプレート値を入力できます。列と行のギャップを独立して制御でき、グリッドセルのコンテンツの整列にjustify-itemsとalign-itemsを設定できます。視覚的なプレビューでは、色付きのグリッドアイ템が表示されるため、レイアウト構成が正確にどのように機能するかを見て確認できます。このツールは、Gridの学習とプロダクションレイアウトのプロトタイピングの両方に適しています。

Why Use CSS グリッド プレイグラウンド?

• 柔軟性のある自動およびカスタムテンプレートモード
• 独立した列と行のギャップ制御
• セルの内容物の整列にjustify-itemsとalign-itemsを使用
• インタラクティブなビジュアルプレビューで色付けされたグリッドアイ템

Common Use Cases

ページレイアウト

ヘッダー、サイドバー、コンテンツ、フッターを含む完全なページレイアウトを作成します。

画像ギャラリー

一貫したスペーシングでレスポンシブな画像グリッドギャラリーを作成します。

ダッシュボードレイアウト

異なるサイズのグリッドエリアを持つダッシュボードウィジェットレイアウトを構築します。

CSS Gridの学習

二次元レイアウトを理解するためにグリッドプロパティを実験します。

Technical Guide

CSS Gridは、コンテナでdisplay: gridを使用して有効になります。grid-template-columnsでは、長さ値、fr単位（分数）、またはrepeat()やminmax()のような関数を使用して列トラックを定義します。fr単位は、利用可能なスペースを比例的に配布します。grid-template-rowsも同様に行トラックで機能します。gap（またはrow-gapとcolumn-gap）は、トラック間のスペーシングを設定します。justify-itemsとalign-itemsは、グリッドセル内のコンテンツの整列方法を制御します。グリッドアイ템は、grid-column: span nとgrid-row: span nを使用して複数のセルに跨ぐことができます。grid-template-areasを使用した名前付きグリッドエリアでは、複雑なレイアウトを視覚的に定義できます。repeat()内のauto-fitとauto-fillキーワードは、メディアクエリーなしでレスポンシブルレイアウトを作成します: repeat(auto-fit, minmax(250px, 1fr))は、最小幅が250pxの場合に可能な限り多くの列を作成します。

Tips & Best Practices

• 1
  柔軟で比例した列サイズにfr単位を使用する
• 2
  minmax()とauto-fitを組み合わせてメディアクエリーなしのレスポンシブレイアウトを作成する
• 3
  読みやすい名前付きレイアウト領域にはgrid-template-areasを使用する
• 4
  一貫したインターセルスペーシングのためにマージンではなくギャップを設定する

Related Tools

CSS Flexbox

CSS Flexbox interactive

🎨 CSS & Design

CSS

HTML CSS, ,

🎨 CSS & Design

CSS

CSS

🎨 CSS & Design

レスポンシブデザインテスター

ビルトインのiframeビューアーで一般的なデバイスのブレークポイントでのウェブサイトをプレビューします。

🎨 CSS & Design

Frequently Asked Questions

Q CSS Gridでのfrとは何か?

frは利用可能なスペースを比例して配布する分数単位です。1fr 2frでは、2列を作成し、2列目は最初の列の2倍の幅になります。

Q レスポンシブグリッドを作成するには?

repeat(auto-fit, minmax(250px, 1fr))を使用してコンテナーの幅に基づいて自動的に列を調整するグリッドを作成します。

Q グリッドアイテムは重なり合うことができますか?

はい、明示的な配置を使用してグリッドアイテムは同じセルを占有でき、層状のデザインを作成できます。

Q GridとFlexboxをいつ使用するべきですか?

二次元レイアウト(行と列)にはGrid、一次元レイアウト(単一行または列)にはFlexboxを使用します。

Q CSS Gridはすべてのブラウザで動作しますか?

CSS Gridはすべてのモダンブラウザでサポートされています。IE11では古いGrid仕様が一部の違いとともにサポートされます。

About This Tool

CSS グリッド プレイグラウンド is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.