display: grid – 新しいCSSプロパティのGrid Layout Module –
仕様は策定中
display: gridは、現在のブラウザではまだ使えませんが、実装されるようになれば、Webレイアウトに新たな可能性を示すものになると思われます。
試してみたい場合は、chromeならdev版をダウンロードするか、アドレスバーに【chrome://flags】と入力し、「試験運用版のウェブ プラットフォームの機能」を有効にします。
最新版のブラウザでは実装済み【追記: 2017.4.6】
2017年の3月から4月にかけて、主要ブラウザのメジャーアップデートが行われました。現在では、Firefox, Chrome, Safari, Operaの最新版でこのGrid Layout Moduleは問題なく使用できるようになっています。
また、MicroSoftのIE及びEdgeにおいては、現在策定されているGrid Layout Module最新版の仕様ではなく、下記リンク先の古いバージョンとなっています。
W3C – Grid Layout / W3C Working Draft 7 April 2011
違いは、（後段で説明している部分においては）指定するプロパティ名ぐらいです。
要は、じゃんじゃん使っちゃいましょう！と、いうことです。
HTMLに左右されないレイアウトが可能に
例えば、上のようなレイアウトをWeb上で表現する時、どのようにHTMLを組むか。
やり方は何通りかあると思いますが、基本的にはDivで囲むなりして、CSSでfloatをかける方法だと思います。
お馴染みの方法ですが、この場合、左の要素と右の要素の高さを合わせるのに苦労します。また、HTMLの置き場所によって、配置も変わってきたりします。例えば、<main></main>と<footer></footer>の記述場所を逆にすると、Web上の配置も上下反対になります。
display: gridでは、これに縛られることなくCSSで比較的自由に要素の配置を指定することが可能です。
下のようなHTMLでも上図のような配置を実現させることができるのです。
<html>
<body>
<header></header>
<footer></footer>
<nav></nav>
<main></main>
</body>
</html>
display: gridでレイアウトする
イメージ的にはテーブルレイアウト？
まず先程のHTMLを上図のように配置するCSSです。詳しい説明は後述。
正直、「は？」という感じだと思いますが、テーブルレイアウトのイメージで考えると理解がしやすいのかな。と、思います。
body {
display: grid;
/* 行（横）と列（縦）の指定 */
/* IE and Edge */
grid-template: "hh"
"nm"
"nf";
/* Chrome, Firefox, Safari, Opera*/
grid-template-area: "header header"
"nav main"
"nav footer";
/* 各行の大きさ（高さ）を指定 */
/* IE and Edge*/
grid-rows: minmax(100px, 1fr) 3fr auto;
/* Chrome, Firefox, Safari, Opera*/
grid-template-rows: minmax(100px, 1fr)
3fr
auto;
/* 各列の大きさ（幅）を指定 */
/* IE and Edge */
grid-columns: 1fr 3fr;
/* Chrome, Firefox, Safari, Opera*/
grid-template-columns: 1fr 3fr;
}
/*
grid-areaで任意の名前を指定
*/
header {
grid-cell: "h"; /* IE and Edge */
grid-area: header; /* Chrome, Firefox, Safari, Opera*/
}
main {
grid-cell: "m"; /* IE and Edge */
grid-area: main; /* Chrome, Firefox, Safari, Opera*/
}
nav {
grid-cell: "n"; /* IE and Edge */
grid-area: nav; /* Chrome, Firefox, Safari, Opera*/
}
footer {
grid-cell: "f"; /* IE and Edge */
grid-area: footer; /* Chrome, Firefox, Safari, Opera*/
}
grid-areaで名前をつけて、grid-template-areasで並び順を指定する
まず各要素（この場合、header, main, nav, footer）に、grid-area（grid-cell）プロパティを使ってエリア名をつけます。そのエリア名をgridを囲う部分（body）に、grid-template-areaプロパティで指定することで要素の並び順を決めることができます。
grid-template-areaプロパティを指定すると、ダブルクオテーションで囲まれた部分が「行」を示します。クオテーション内に空白区切りで記述されたエリア名が「列」となる。
同じエリア名はまとまった一つのカラムとして表示されます。tableで言うところの「colspan」や「rowspan」のような感じ。
ちなみに、上記CSSでは分かりやすいように改行していますが、必須ではありません。
grid-template-rowsとgrid-template-columnsはグリッドの大きさを指定します
/* 各行の大きさ（高さ）を指定 */
grid-template-rows: minmax(100px, 1fr)
3fr
auto;
/* 各列の大きさ（幅）を指定 */
grid-template-columns: 1fr 3fr;
空白区切りでそれぞれの「行」・「列」の大きさを指定します。
今回の例では「行が3つ」、「列が2つ」です。よって、grid-template-rowsには3行分、grid-template-columnsに2列分の指定をします。
【fr】とか【minmax()】とか【min-content】とか
この辺が少しむずかしいのですが（個人的に）。というかまだ理解しきれていません。とくにmax-contentとmin-content。。。
- fr
- 可変グリッドの幅もしくは高さの相対的な大きさを示しています。よって、「1fr」と「3fr」があれば、「3fr」は「1fr」の3倍の大きさになります。
- minmax(min, max)
- CSSファンクションです。グリッドサイズの幅や高さの最小値及び最大値を指定します。
- min-content
- そのグリッドが取れる最小の値を示す
- max-content
- そのグリッドが取れる最大の値を示す
min-contentとmax-contentは指定してもあまり何が違うのか変化を感じられず。とても自信のない感じに仕上がっています。
まだまだあるよ
さらに柔軟に配置できるような書き方があります。少しややこしいですが。
まだ策定中の仕様のため、今後マイナーチェンジが施され、使いやすく、且つ、分かりやすくなるのではないかと個人的には思っています。
“Grid Layout Module (display: grid)のプロパティや使い方に触れてみる” への1件の返信
コメントは受け付けていません。