CSS グリッドを利用する

ウェブ アプリケーションを構築する場合、最初に必要なことの 1 つは、アプリのコンテンツをレイアウトする方法です。

多くのデザイナーは、サイトやアプリのコンテンツのレイアウトに架空のグリッドを使用しています。CSS グループは、レイアウトを簡単に行えるようにするために懸命に取り組んでいます。その一環として、ブラウザに導入されている CSS グリッド レイアウト モジュールが開発されました。

この機能は Chrome の試験運用版フラグを設定して試すことができます。IE ではバージョン 10 以降で実装されており、ほとんどのブラウザで間もなく実装される予定です。

概要

• CSS グリッド レイアウトでは、レイアウトの行と列を定義できます
• グリッドを適応させて利用可能なスペースを活用する
• コンテンツの順序はグリッド コンテナの表示順序に依存しない
• メディアクエリに応じてレイアウトを変更できるため、レスポンシブ デザインが簡単になる
• コンテンツが重なる（他の方法では不可能なレイアウトが可能）
• グリッド レイアウトは高速

次の概要動画では、CSS グリッド レイアウトの仕組みが詳しく説明されています（スライドはこちら:

試してみる

Chrome で CSS グリッド レイアウトを簡単に使用できるようになりました。まず、試験運用版フラグをオンにして、この機能を有効にする必要があります。

まず、chrome://flags URL を読み込み、以下のように [試験運用版のウェブ プラットフォーム機能を有効にする] まで下にスクロールします。

[有効にする] をクリックしてフラグをオンにすると、ブラウザの再起動を求める次のようなメッセージが表示されます。

[今すぐ再起動] ボタンをクリックしてブラウザを再起動すると、CSS グリッド レイアウトを試す準備が整いました。

ご意見をお寄せください

CSS グリッド レイアウトはウェブ コンテンツ用の優れた新しいプリミティブですが、デベロッパーの皆様のご意見をぜひお聞かせください。フィードバックは、ここにコメントを残す、件名に「[css-grid]」を含めて W3C CSS ワーキング グループ リストに送る、バグを記録する、ブログやツイートで送るなど、さまざまな方法があります。この便利な新機能を利用して、皆様が優れたレイアウトを構築されるのを楽しみにしています。