CSS グリッドを利用する

Alex Danilo

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

多くのデザイナーは、サイトやアプリにかかわらず、仮想グリッドを使用してコンテンツをレイアウトしています。CSS グループは、レイアウトを簡単にするために懸命に取り組んでおり、その一環として、ブラウザで利用可能になった CSS グリッド レイアウト モジュールを作成しました。

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

エグゼクティブ サマリー

• CSS グリッド レイアウトを使用すると、レイアウトの行と列を定義できます。
• グリッドは、使用可能なスペースに合わせて調整できます
• コンテンツの順序は、グリッド コンテナの表示順序とは別に設定できます
• メディアクエリに基づいてレイアウトを変更できるため、レスポンシブ デザインが容易
• コンテンツを重ねて配置できる（他の方法では不可能なレイアウトを可能にする）
• グリッド レイアウトは高速

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

試してみる

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

まず、chrome://flags URL を読み込み、次のように [Enable experimental Web Platform features] オプションまでスクロールします。

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

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

ご意見をお寄せください

CSS グリッド レイアウトはウェブ コンテンツの新しい優れたプリミティブですが、いつものように、デベロッパーの皆様からのフィードバックをお待ちしております。フィードバックはさまざまな方法で送信できます。ここにコメントを残す、W3C CSS Working Group リストにメールを送信する（件名に「[css-grid]」と記入してください）、バグを報告する、ブログやツイートでフィードバックを送信するなどです。この便利な新機能を使って、素晴らしいレイアウトを作成してください。