CSS Gridプレイグラウンド
CSS Gridのテンプレート・間隔・配置を視覚的に組み立て、レイアウトCSSをコピーできます。
プレビュー
グリッド内の番号付きアイテムをクリックして選択・配置を変更します。
grid-template-columns
—
grid-template-rows
—
生成されたCSS
—
—
列
行
間隔
配置
16px
16px
グリッドアイテム
アイテム 1
アイテムがまだありません。アイテムを追加してグリッドに配置します。
プリセットCSS Gridプレイグラウンドについて
CSS Grid Playgroundは、実際のグリッドレイアウトを視覚的に組み立てられるツールです。列と行のトラックを追加・削除してgrid-template-columnsとgrid-template-rowsを組み立て、列と行の間隔を設定し、justify-items、align-items、justify-content、align-contentという4つの配置プロパティすべてを調整できます。プレビューはすべての変更を即座に反映します。
グリッドが真価を発揮するのはアイテムの配置です。アイテムを追加し、プレビュー内でクリックして選択したら、column start、column span、row start、row spanで位置を決めます。これがサイドバーやヘッダー、フィーチャーセルが複数のトラックにまたがる仕組みで、実際のグリッドレイアウトのほぼすべてに使われているテクニックです。
holy grail、dashboard、galleryという3つのプリセットは、分解して自分用に応用できる定番のページ構造を読み込みます。レイアウトが決まったら、グリッドコンテナの完全なルールと各アイテムの配置を含む生成済みCSSをコピーしてください。
CSS Gridプレイグラウンドの使い方
- 列と行のトラックを追加・削除してグリッドテンプレートを定義します。
- 列間隔と行間隔を設定します。
- justify-items、align-items、justify-content、align-contentの配置設定を調整します。
- アイテムを追加し、プレビュー内でクリックして、column/rowのstartとspanを設定して配置します。
- holy grail、dashboard、galleryのプリセットを読み込んで定番レイアウトを学びます。
- 生成されたCSSをスタイルシートにコピーします。
よくある質問
justify-itemsは各アイテムをそれぞれのグリッドセル内で整列させます。justify-contentは、トラックがコンテナを満たしていないときにグリッド全体をコンテナ内で整列させます。同じ違いが、align-itemsとalign-contentという形で縦方向にも当てはまります。
アイテムを選択し、column spanを増やします。CSSの出力ではspan値を指定したgrid-columnが使われます。row spanと組み合わせることで、同じグリッド内にヘッダーバー、サイドバー、大きなフィーチャーセルを作れます。
定番のページ骨格で、幅いっぱいのヘッダーとフッターの間に、ナビゲーション、メインコンテンツ、asideという3つの列を配置します。floatを使うと悪名高いほど扱いにくいレイアウトでしたが、このプリセットはいくつかのグリッド配置だけできれいに解決できることを示しています。
Gridは、ページの骨組み、ダッシュボード、ギャラリーなど、行と列を揃える必要がある二次元レイアウトに優れています。Flexboxは、ツールバーやメニューのような一次元の流れに最適です。両者は組み合わせやすく、ページ全体はGrid、コンポーネント内部はFlexという使い分けができます。
はい、無料でブラウザ上で動作します。好きなだけ試すことができ、作成したものが自分のマシンから外に出ることはありません。
人気の検索
CSS grid ジェネレーター
CSS grid プレイグラウンド
grid-template-columns ジェネレーター
CSS grid レイアウト ジェネレーター
grid-template-areas ビルダー
CSS grid gap ツール
CSS grid ビジュアライザー
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。