CSS グリッドを利用する

ウェブ アプリケーションを作成する際に最初に必要なのは、アプリのコンテンツをレイアウトする方法です。

多くのデザイナーが、サイトやアプリでのコンテンツの配置に架空のグリッドを使用します。CSS グループはレイアウトを簡易化するために取り組んできました。その一環として、CSS グリッド レイアウト モジュールを開発しました。このモジュールはブラウザに搭載されています。

この機能は、Chrome で試験運用版フラグに基づいてお試しいただけます。IE でもバージョン 10 から実装されており、ほとんどのブラウザでもまもなく実装される可能性があります。

概要

• CSS グリッド レイアウトを使用すると、レイアウトの行と列を定義できます
• グリッドは利用可能なスペースを活用するために適応できる
• コンテンツの順序は、グリッド コンテナの表示順序から切り離すことができます。
• レイアウトはメディアクエリに基づいて変更できるため、レスポンシブ デザインが容易になります。
• コンテンツが重なって表示される可能性がある（他の方法では不可能なレイアウトが可能になる）
• グリッド レイアウトは高速です

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

試してみる

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

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

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

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

ご意見をお寄せください

CSS グリッド レイアウトはウェブ コンテンツの新しいプリミティブとして優れたものですが、いつものように、開発者の皆さまのご意見をお聞かせいただきたいと考えています。フィードバックを提供する方法はたくさんあります。ここにコメントを残す、件名に「[css-grid]」を入れて W3C CSS ワーキング グループ リストにメールを送信する、バグをログする、自分の考えをツイートする、などが考えられます。この便利な新機能を使って、皆さんが作成する優れたレイアウトを目にすることを楽しみにしています。