広告が嫌いですか? 行く広告なし今日 

CSS Grid Generator (Visual)

開発者文章

広告・取り除く？

入力

自動処理

出力

クライアント側

広告・取り除く？

ガイド

CSSグリッドジェネレーター

CSSグリッドレイアウトを視覚的に構築します。セルをクリックして名前付きエリアを定義し、列と行のサイズを調整して、すぐに本番準備完了のCSSコードを入手できます。グリッド構文を覚える必要はありません。クリックして構築するだけです。

使い方

列数と行数を設定し、グリッドセルをクリックして名前付きエリア（ヘッダー、サイドバー、メイン、フッターなど）を割り当てます。同じ名前のセルは同じ色でハイライトされます。レイアウトをデザインすると、CSSの出力がリアルタイムで更新されます。Holy GrailやDashboardなどの一般的なレイアウトには、プリセットボタンを使用してください。

特徴

インタラクティブグリッドエディター – セルをクリックして、自動着色された視覚化で名前付きエリアを割り当てます
ライブCSS出力 – grid-template-areas、grid-template-columns、grid-template-rows、およびgapを含む、本番準備完了のコード
ライブプレビュー – 名前付きエリアが色分けされたレイアウトをリアルタイムで表示します
プリセットレイアウト – ワンクリックでHoly Grail、Dashboard、Blog、Portfolioレイアウトを作成できます
柔軟なサイジング – fr、px、またはパーセント単位を使用して列と行のサイズを定義します
子要素CSS – 各名前付きエリアのgrid-areaルールを自動生成します
100% クライアントサイド – すべてのレイアウト生成はブラウザ内で行われます

広告・取り除く？

 よくある質問

CSS Gridとは何ですか？Flexboxとの違いは何ですか？

CSS Gridは、列と行の両方を同時に処理する二次元レイアウトシステムです。Flexboxは一次元で、行または列の軸に沿って機能します。Gridはページレベルのレイアウト（ヘッダー、サイドバー、コンテンツエリア）に最適ですが、Flexboxはコンポーネントレベルの配置（ナビゲーションアイテム、カードコンテンツ）に優れています。ほとんどの最新レイアウトでは、両方を組み合わせて使用します。
CSS Gridのfrユニットとは何ですか？

fr（フラクション）ユニットは、グリッドコンテナの利用可能なスペースの分数を示します。1fr 2frは、2番目の列が最初の列の2倍のスペースを取得することを意味します。Flexboxのflex-growに似ていますが、グリッドトラック専用に設計されています。frユニットは、固定サイズのトラック（px、em）が割り当てられた後、残りのスペースを自動的に分配します。
grid-template-areasとは何ですか？名前付きエリアを使用する理由は何ですか？

grid-template-areasを使用すると、CSSでグリッド構造を視覚的に表す名前付き文字列を使用してレイアウトを定義できます。行番号（grid-column: 1 / 3）でアイテムを配置する代わりに、名前（grid-area: header）で割り当てます。生成されるCSSは、レイアウトのアスキーアート版のように読めるため、自己文書化され、保守が容易になります。
WebデザインにおけるHoly Grailレイアウトとは何ですか？

Holy Grailレイアウトは、幅全体に広がるヘッダー、3列のボディ（左サイドバー、メインコンテンツ、右サイドバー）、および全幅のフッターを備えたクラシックなWebページ構造です。歴史的にCSSのfloatで実装するのが困難であり、クリーンな実装が非常にまれであったため、Holy Grailと呼ばれていました。CSS Gridを使用すると、これは非常に簡単になります。