はじめに

グリッド・カラムレイアウトといえば、以前紹介したFlexible Box（そこが知りたい、Flexible Box）やdisplay:table;を利用したマルチカラムレイアウト（第1回 display: tableの活用 1）などがあります。また、CodeGridではまだ紹介していませんが、CSS Multi-column Layout Moduleもマルチカラムレイアウトをする上で重要です。

何ができるのか

Grid Layout Moduleでは、CSS上でレイアウト情報を定義することができます。display: grid;が指定された親要素にグリッドレイアウト情報を定義し、その子要素では、そのグリッドのどこに配置されるかを定義します。table要素を利用したテーブルレイアウトと似たように思えますが、table要素がHTML側でレイアウト構造を指定することに対し、Grid Layout ModuleではCSS側で、どのようなレイアウト構造にするかを指定します。

広い画面と狭い画面でレイアウトを変更しています。これをGrid Layout Moduleを使い、実現します。

まずはHTML部分です。HTMLの構造は非常に単純です。

<div class="grid">
  <div class="title">Title</div>
  <div class="status">Status</div>
  <div class="memberList">Member List</div>
  <div class="gameWindow">Game Window</div>
  <div class="chatWindow">Chat Window</div>
</div>

次にCSS部分です。display: grid;などを使用して、レイアウト情報を指定します。画面幅が狭くなった時には、メディアクエリでレイアウトを再定義しています。

/* landscape */
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
}
.chatWindow {
  grid-area: 3 / 2;
}

たったこれだけで、HTMLの構造からは想像しづらいレイアウトを実現することができます。このデモを新しいウィンドウで開き、ウィンドウサイズを変化させてみると、レイアウトが変更されることを確認できるはずです。

.nested-code-block {
  in: the-cg-colum;
}

Grid Layout Moduleに登場する用語

Grid Layout Moduleの理解を深めるには、そこに登場する用語を知っておく必要があります。ここで紹介する用語は以下のとおりです。

• グリッドコンテナ
• グリッドエリア

まずは、Grid Layout Moduleに登場する用語の中で最も大事な、グリッドコンテナとグリッドアイテムについて解説します。

グリッドコンテナに関連するプロパティは以下の通りです。

これらのプロパティを駆使して、レイアウト情報を指定します。justify-contentやalign-contentなどは、Flexible Boxで解説したものと同じです。

まとめ

今回はひとまず基本となる概念、グリッドコンテナとグリッドアイテムについて解説しました。次回はさらにグリッドを基本とするレイアウトに必要な概念と、その実装について解説を進めていきます。じっくりお付き合いください。

ここは何もついてないブロック

<div>escape?</div>

.nested-code-block {
  in: the-cg-colum;
}

このデモが問題

タイトルのないデモ

見出しのないファイルツリー

見出しのあるファイルツリー