Developer Tools
Design Tools
Web UtilitiesCSS Grid Playground
リアルタイムプレビュー、テンプレートエリアのサポート、即時CSSコード出力でCSSグリッドレイアウトをビジュアルに作成します。列、行、ギャップ、アイテムの配置をインタラクティブに設定できます。
プリセット
コンテナープロパティ
アイテムプロパティ
ライブプレビュー
コンテナーCSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}アイテムCSS
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}関連ツール
CSS Grid Playgroundについて
使い方
- コンテナープロパティを設定: grid-template-columns、grid-template-rows、gap、justify-items、align-items、justify-content、align-content
- 最大8つのグリッドアイテムを追加し、grid-column-start/endとgrid-row-start/endで各アイテムを配置
- テンプレートフィールドでspan記法（例: span 2）または明示的なライン番号を使用
- リアルタイムでレイアウトをプレビュー — プレビューの任意のアイテムをクリックしてエディターで選択
- Holy Grail、Dashboard、Card Gridなどの一般的なレイアウトにプリセットを適用してカスタマイズ
- コンテナーとアイテムの生成されたCSSコードを直接プロジェクトにコピー
主な使用例
- CSSグリッドプロパティを即時視覚フィードバックでインタラクティブに学習
- ヘッダー、サイドバー、ダッシュボード、カードグリッドなどのレイアウトをプロトタイプ作成
- ライン番号を視覚的に調整してグリッド配置の問題をデバッグ
- 一般的なレイアウト用の基本グリッドCSSを生成
- 学生や同僚にCSSグリッドを教える
よくある質問
CSS Grid Playgroundとは何ですか？
CSS Grid Playgroundは、すべてのCSSグリッドコンテナーとアイテムのプロパティをビジュアルに設定できるインタラクティブなブラウザーツールです。変更はライブプレビューに即座に反映され、すぐに使えるCSSコードが自動的に生成されるので、プロジェクトにコピーできます。
どのコンテナープロパティを設定できますか？
grid-template-columns、grid-template-rows、gap（またはcolumn-gapとrow-gapを個別に）、justify-items、align-items、justify-content、align-contentを設定できます。すべての値は、fr単位、repeat()、minmax()、autoを含む任意の有効なCSS構文をサポートしています。
特定のグリッドラインにアイテムを配置するには？
アイテムプロパティパネルの番号付きタブを使用してアイテムを選択し、grid-column-start、grid-column-end、grid-row-start、grid-row-endを設定します。明示的なグリッドラインには数値を入力するか、自動配置には'auto'のままにします。
プリセットとは何ですか？どのように使いますか？
プリセットは一般的なレイアウト用の定義済みグリッド設定です。'Holy Grail'はクラシックなヘッダー/ナビ/メイン/サイドバー/フッターレイアウトを作成し、'Sidebar + Main'はサイドバー付きの2カラムレイアウトを構築し、'3-Col Masonry'はスパンするアイテムを示し、'Dashboard'は4カラムダッシュボードを表示し、'Blog Layout'はサイドバー付きの典型的な記事を設定し、'Card Grid'は均等な3カラムカードグリッドを作成します。
grid-template-columnsはどのような値を受け付けますか？
grid-template-columnsは任意の有効なCSSトラックリストを受け付けます。'200px 1fr'のような固定長、'repeat(3, 1fr)'のようなrepeat()関数、'repeat(3, minmax(100px, 1fr))'のようなminmax()、auto-fillまたはauto-fit、または'[start] 1fr [end]'のような名前付きラインなどです。
fr単位とピクセルの違いは何ですか？
fr単位（フラクショナル）はグリッドコンテナー内の利用可能なスペースの一部を表します。'1fr 1fr 1fr'はスペースを3つの列に均等に分割します。'2fr 1fr'は最初の列に2倍のスペースを与えます。ピクセル値はコンテナーのサイズに関係なく固定です。
justify-itemsとjustify-contentの違いは何ですか？
justify-itemsはインライン軸に沿ったグリッドセル内でのアイテムの配置を制御します。justify-contentは余分なスペースがある場合のコンテナー内のグリッド全体の配置を制御します。同様に、align-itemsはブロック軸のセル内でアイテムを配置します。
グリッドアイテムのjustify-selfとalign-selfとは何ですか？
justify-selfは単一のグリッドアイテムのjustify-itemsを上書きし、セル内のインライン配置を制御します。align-selfは単一のアイテムのalign-itemsを上書きし、ブロック配置を制御します。どちらもauto、start、end、center、stretchを受け付けます。
アイテムを複数の列または行にまたがらせるには？
grid-column-startとgrid-column-end（またはgrid-row-startとgrid-row-end）を設定してスパンを作成します。例えば、列1から列3にまたがるには、start=1、end=3に設定します。startを'auto'のままにしてendを'span 2'に設定することで、2つのトラックにまたがることもできます。
グリッドアイテムはいくつ追加できますか？
グリッドアイテムは最大8つ追加できます。'+ アイテム追加'ボタンをクリックして追加します。各アイテムはカラーコードされており、設定パネルとライブプレビューで識別できます。
列と行のカスタムギャップサイズを使用できますか？
はい。デフォルトでは、単一のgap値が列と行の両方の溝に適用されます。'カスタム列/行ギャップを使用'オプションをオンにして、独立したスライダーでcolumn-gapとrow-gapを個別に設定します。
生成されたCSSをコピーするには？
2つのコピーボタンが利用可能です。コンテナーCSSブロック(.grid-container)用と、アイテムルールを含む全CSSブロック用です。'CSSをコピー'ボタンをクリックすると、コードがクリップボードにコピーされます。