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

使い方

1. グリッドの寸法を定義: レイアウトの列と行の数を入力します。
2. トラックを定義: fr単位、ピクセル、パーセンテージ、auto、minmax()を使って各列の幅と各行の高さを設定します。
3. CSSをコピー: 生成されたdisplay: grid、grid-template-columns、grid-template-rows、gapプロパティが、スタイルシートに貼り付ける準備ができています。

なぜCSS Gridジェネレーターを使うのか?

CSS GridはCSSの最も強力なレイアウトシステムです, 以前はテーブル、フロート、JavaScriptが必要だった複雑な2次元レイアウトを作成できます。しかし、grid-template-columns、fr単位、minmax()、repeat()、名前付き領域をマスターするには練習が必要です。このビジュアルジェネレーターを使うと、クリック&ドラッグで任意のグリッドを構築でき、すぐに使用するか、Gridの理解を深めるために学ぶためのクリーンなCSSを生成します。

機能

• ビジュアルグリッドビルダー: クリックして列と行のトラックを視覚的に定義します。
• fr単位サポート: レスポンシブな比例列のために柔軟なfr単位を使用します。
• minmax()ショートカット: 最小および最大サイズの制約でレスポンシブ列を簡単に作成します。
• ギャップ制御: column-gapとrow-gapを独立して設定します。
• 名前付き領域: ビジュアルエリアペインティングインターフェースでgrid-template-areasを定義します。

よくある質問

CSS Gridの「fr」単位とは?

fr(fraction)単位は、利用可能なスペースを比例的に分配します。1fr 2fr 1frの3列グリッドでは、中央の列が外側の列の2倍のスペースを取得します。fr単位は、固定サイズトラックの割り当て後に残りのスペースを共有します。

メディアクエリなしでレスポンシブグリッドを作成するには?

grid-template-columnsの値としてrepeat(auto-fill, minmax(200px, 1fr))を使用します。これにより、最小サイズで許容される列が必要な数だけ作成され、利用可能なスペースを埋めるように拡張されます。コンテナの幅が変わると、項目が自動的に再配置されます。

grid-templateとgrid-autoの違いは?

grid-template-columns/rowsは指定する明示的なトラックを定義します。grid-auto-columns/rowsは暗黙のトラックのサイズを定義します, 項目が明示的なグリッドからオーバーフローしたときに自動的に作成される列と行。

CSS Grid の簡単な歴史

CSS Grid 以前、Web レイアウトは3つの苦痛な時代を経験しました。テーブルベースのレイアウト（1995-2008）は視覚構造のために <table> 要素を悪用し、Photoshop コンプを HTML グリッドに「スライス＆ダイス」していました。フロートベースのレイアウト（2008-2013）はテーブルを float プロパティに置き換え、折り返した子要素を含めるために Nicolas Gallagher の micro-clearfix（2011）のような「clearfix」ハックを必要としました。Flexbox（CSS Flexible Box Layout Module Level 1、W3C 勧告 2018）は1次元レイアウトを解決しましたが、真の2次元グリッドには苦戦しました。CSS Grid の物語は Internet Explorer 10（2012）での Microsoft の -ms-grid 実装から始まり、W3C 仕様に情報を与えた初期版でした。CSS Grid Layout Module Level 1 の最初の W3C 公開作業草案は 2011年4月に公開されましたが、本当の勢いは Rachel Andrew（彼女の著書『Get Ready for CSS Grid Layout』、2016）と Jen Simmons（Mozilla デベロッパーアドボケイト、2016-2018年のカンファレンスサーキット）の啓蒙活動から来ました。ブラウザレースは 2017年3月の注目すべき2ヶ月の窓で決着しました：Chrome 57、Firefox 52、Safari 10.1、Edge 16 がすべてお互いから数週間以内にプレフィックスなしの Grid を出荷しました。W3C は 2016年12月に Grid Level 1 を候補勧告としてマークしました；最終的な W3C 勧告は 2020年8月に到着しました。Subgrid（Level 2）は Firefox 71（2019年12月）、Safari 16（2022年9月）、Chrome 117（2023年9月）で出荷されました。次のフロンティアは提案された Masonry レイアウトです（CSS Working Group 2020年の提案、2021年から Firefox でフラグ越し）。

CSS グリッドの解剖学

• グリッドコンテナ。display: grid（または display: inline-grid）は任意の要素をグリッドコンテキストに変えます。その要素の直接の子は「グリッドアイテム」となり、グリッドレイアウトに参加します。孫は、それらも display: grid を設定しない限り影響を受けません。
• grid-template-columns と grid-template-rows。明示的なトラック（列と行）を定義します。値は固定（px、em、rem）、フレキシブル（fr、CSS Grid 仕様で定義された「分数」単位）、コンテンツサイズ（auto、min-content、max-content）、またはそれらの任意の組み合わせにできます。grid-template-columns: 200px 1fr 1fr は200pxのサイドバーと2つの等しいフレキシブル列を作成します。
• fr 単位。分数単位は、固定サイズのトラックが割り当てられた後に残りのスペースを分配します。1fr 2fr 1fr は中央の列にサイド列の2倍の残余スペースを与えます。fr は Grid 独自のものです（Flexbox の関連同等物 flex-basis: 0 1 fr は同じものではありません）。「パーセント列」パターンが何十年も苦戦してきたもの、つまり残余スペースのクリーンな分配を解決します。
• repeat() と minmax()。repeat(3, 1fr) は3つの等しい列をコンパクトに定義します。minmax(200px, 1fr) はトラックを範囲に制約します。キラーコンビネーション grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) は、メディアクエリなしでコンテナにフィットするよう列数を自動調整するレスポンシブグリッドを生成します。この1行が、本番 CSS の何千ものブレークポイント定義を置き換えました。
• grid-template-areas。グリッドの領域に名前を付ける、視覚的にレイアウトされた文字列構文。子は grid-area: header で名前付き領域にオプトインします。結果はレイアウト・アズ・アスキーアート：CSS を読む誰でもソースからグリッドを視覚化できます。CSS デザイナーを10年間打ち負かしてきた「ホーリーグレイル」レイアウト（ヘッダー / サイドバー / メイン / アサイド / フッター）に特に強力です。
• gap（および column-gap、row-gap）。トラック間のスペーシングを定義します。gap: 16px はすべての行と列を均一にスペーシングします。Grid 以前、これは脆い padding+margin パターンか、慎重に計算された負のマージンを必要としました。同じ gap プロパティは後に Flexbox に追加され（2022年以降、普遍的にサポート）、現代の CSS におけるアイテム間スペーシングを処理する正規の方法と現在見なされています。

実世界の Grid パターン

• 画像ギャラリー。repeat(auto-fill, minmax(200px, 1fr)) パターンは、ポートフォリオサイト（Behance グリッド）、フォトギャラリー（Unsplash スタイル）、製品コレクションのための支配的な CSS です。メディアクエリなしでの列数の自動適応は Grid 以前、事実上不可能でした。
• ダッシュボードと管理パネル。Grafana、Datadog、Stripe Dashboard、およびほとんどの現代の管理 UI は、カード、サイドバー、コンテンツ領域を配置するために名前付きグリッド領域を使用します。ドラッグ＆ドロップのダッシュボードビルダー（DataDog、Looker、Tableau）は、ユーザーアクションを grid-template-areas 文字列の変更に翻訳します。
• 雑誌スタイルのレイアウト。編集サイト（The Guardian、NYT、Vox）は、重なる要素、複数列にまたがる大きなヒーロー画像、メインテキスト列を破るプルクォートを含む非対称レイアウトに Grid を使用します。Grid の z 軸（明示的な領域を持つ z-index）はレイヤリングを自然に処理します。
• 製品カードグリッド。Shopify、Amazon、Etsy のストアフロント。パターンは非常に一般的なので、Tailwind CSS、Bootstrap、Bulma はすべてコアユーティリティセットの一部としてグリッドベースのカードコンポーネントを出荷しています。カードのアスペクト比は、今では通常 aspect-ratio プロパティでロックされています（Safari 15、Chrome 88、2021）。
• 「ホーリーグレイル」レイアウト。ヘッダー / 左サイドバー / メインコンテンツ / 右サイドバー / フッター。この5領域レイアウトは、15年間 CSS の未解決の問題でした。grid-template-areas と8行の CSS で、2017年に簡単になりました。パターンはドキュメンテーションサイト（Stripe Docs、MDN、Vercel Docs）を支配しています。
• フォームレイアウト。左にラベル、右に入力の2列フォームレイアウト、1行に市/州/郵便番号のあるアドレスフォーム、マルチステップウィザード。Grid は、コンテンツ幅が変動する場合でも、ラベルと入力を行を横断してきれいに整列させることができます。パターンは、以前のラベル幅ハックアプローチをよりクリーンな CSS に置き換えました。
• モーダルとダイアログの配置。フルビューポートオーバーレイ上の display: grid; place-items: center; は、1行でダイアログを水平・垂直方向に完璧に中央配置し、何十年も使われてきた position: absolute; top: 50%; transform: translateY(-50%); パターンを置き換えます。place-items は、任意のコンテンツを中央配置するための正規の2024年の方法です。
• メディアクエリなしのレスポンシブ。repeat(auto-fill, minmax(...)) と gap を組み合わせると、メディアクエリなしでコンテナ幅に適応するレイアウトが生成されます。これは現代のレスポンシブデザインの基盤です：ビューポートサイズではなく コンテナ サイズに応答するレイアウト、Container Queries（現在も出荷済み、2023）を予期しています。

標準とマイルストーン

• IE10 -ms-grid（2012）。Microsoft は、Microsoft の Phil Cupp によって設計された最初の Grid 風実装を出荷しました。構文は最終的な W3C 仕様と異なっていましたが、概念を証明し、その後の設計決定に影響を与えました。
• CSS Grid Layout Module Level 1、W3C 作業草案（2011年4月）。最初の W3C 公開草案。複数の反復が続きました；構文は2011年と2017年の最終実装の間で大幅に進化しました。
• Rachel Andrew と Jen Simmons の啓蒙活動（2014-2017）。Andrew の著書『Get Ready for CSS Grid Layout』（Smashing Magazine、2016）と Mozilla デベロッパーアドボケイトとしての Simmons のカンファレンストークは、ブラウザの出荷を実現可能にしたコミュニティ知識ベースを構築しました。両者は仕様の W3C エディター注で謝辞を受けています。
• ブラウザレース、2017年3月。注目すべき2ヶ月の窓内で、Chrome 57（3月9日）、Firefox 52（3月7日）、Safari 10.1（3月27日）、Edge 16（2017年10月）がすべてプレフィックスなしの Grid を出荷しました。この複雑さの機能に対するこのレベルの同期されたクロスブラウザ出荷は、ほぼ前例のないものでした。
• 候補勧告（2016年12月）。CSS Grid Level 1 は W3C 候補勧告に昇格されました、これは W3C 勧告の前の最終段階です。CR フェーズは通常、何年もかかります；Grid はこの段階でほとんどの CSS 機能よりも速く動きました。
• W3C 勧告（2020年8月）。Grid Level 1 は W3C 勧告として最終化されました。これは技術的には仕様の「ローンチ」日付ですが、すべての主要なブラウザは3年前にすでに動作する実装を出荷していました。
• Subgrid（Level 2、2019-2023）。Subgrid はグリッドアイテムがその親のトラック定義を継承することを可能にし、「ネストされたグリッドの整列」問題を解決します。Firefox 71（2019年12月）、Safari 16（2022年9月）、Chrome 117（2023年9月）。Chrome の遅い展開は実装の複雑さを反映していました。
• Masonry レイアウト（提案、2020-）。CSS Working Group は2020年以来構文を議論してきました。Firefox は2021年にフラグの後ろで出荷しました。アイテムを列にパックする Pinterest スタイルの流動レイアウトがターゲットユースケースです。Chrome チーム（Apple 主導）と Mozilla チームは競合する構文を提案しています；2024年時点で解決は保留中です。

その他のよくある質問

Grid と Flexbox はいつ使うべきですか？

コミュニティの略式：Flexbox は1次元、Grid は2次元用です。ボタンの行をレイアウトする場合や単一方向にアイテムを整列する場合は、Flexbox の方がシンプルです。整列する必要のある行と列を持つページ全体のレイアウトを設計する場合は、Grid が正しいツールです。多くの実際のレイアウトは両方を組み合わせます：ページの骨格には Grid、各グリッド領域内のコンポーネントレベルの整列には Flexbox。現代のフレームワーク（Tailwind、Bootstrap 5）はこのパターンを採用しています。

CSS Grid は古いブラウザで動作しますか？

すべてのエバーグリーンブラウザ（Chrome、Firefox、Safari、Edge）は2017年3月以降 Grid をサポートしています。Internet Explorer 11 は初期の -ms-grid 構文のみ（サブセット、プレフィックス付き、多くの機能が欠落）を持っています。IE11 サポートには、@supports クエリを使用して Flexbox またはフロートレイアウトにフォールバックします。2024年時点で、IE11 のグローバル使用率は0.5%未満であるため、ほとんどのチームはフォールバックを廃止しています。Caniuse.com はプレフィックスなしの Grid のグローバルサポートを97%以上と報告しています。

grid-template-areas と grid-area の違いは何ですか？

grid-template-areas は グリッドコンテナ に設定され、グリッドの名前付き領域を視覚的にマッピングします（1行に1つの文字列）。grid-area は グリッドアイテム に設定され、それらの名前付き領域のいずれかに割り当てます。両者は一緒に機能します：コンテナが「マップ」を宣言し、アイテムが「私は領域 X です」を宣言します。動的レイアウトに便利な、名前の代わりに行番号（grid-area: 1 / 1 / 3 / 4）で直接 grid-area を使用することもできます。

subgrid とは何で、いつ使うべきですか？

Subgrid は、ネストされたグリッドが独自のものを作成する代わりに、親グリッドのトラック定義を継承することを可能にします。これは、たとえば内部レイアウトが周囲のカードと整列する必要があるカードのように、ネストされたグリッドにわたってアイテムを整列する問題を解決します。ネストされたグリッドで grid-template-columns: subgrid を使用します。Firefox 71+（2019年12月）、Safari 16+（2022年9月）、Chrome 117+（2023年9月）で利用可能です。サポートしていないブラウザでは通常のネストされたグリッドにフォールバックします。

Grid はアクセシビリティとどのように相互作用しますか？

Grid 配置は DOM ソース順を変更しません：アイテムは割り当てた視覚的位置に表示されますが、スクリーンリーダーとキーボードタブ順はソースに従います。WCAG 2.1 SC 1.3.2 意味のある順序は、スタイルが取り除かれたときにソース順が意味をなすことを要求します。意味するもの：論理的読書順のために最初に DOM ソースを設計し、次にアイテムを視覚的に配置するために Grid を使用します。grid-column: 3 / 5; grid-row: 2 でアイテムを劇的に並べ替える場合、話される順序がまだ意味をなすことを確認するためにスクリーンリーダーで監査します。