※本記事は『display:grid;』系をサポートしているブラウザでご覧ください
Can I use...まぁ要するにまたまたie(インターネットエクスプローラー)以外のブラウザですね^^;
下記は1～8までナンバリングされたボックスレイアウト例ですが、ソースを覗いていただければ分かりますが、html 的には番号順の文章構造になっています。
float や flex などで実装するのは、おそらく無理であろう見た目となっていますよね？
1
2
3
4
5
6
7
8
大昔は tableタグ を入れ子しまくるという、なんとも無茶苦茶なやり方が普通だった Webレイアウト ですが、正しい文章構造でのマークアップや、表示速度改善の観点や、SEO の重要性などから、html構造と装飾(レイアウトも含む)は切り離して考えられるようになり、その後は float + clearfix (回り込みレイアウト)に取って代わり、さらにはブラウザシェアの変動や、レスポンシブ構築の必要性などから、flex を使用したレイアウト法が主流となりました。
が…さらにさらにhtml文章構造の正当性を保ちつつ、デザイン振れ幅を大きくトルことができる グリッドレイアウト の登場となりました！
まぁ登場したのは3年以上前ですが…gridプロパティ自体の仕様が固まってきたのと、ブラウザの解釈・非対応バージョンの絶滅加減が追い付いてきたので、もうそろそろ大手を振って主役になりうるプロパティかなぁ～ってことで、今のうちにシッカリと理解しておきましょう！
※当然便利なモノゆえに少々難解ではあります…
1
2
3
4
5
6
7
8
格子状のマス目に好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。
親要素(コンテナ)にgrid(及びinline-grid)を指定することで、直下の子要素(アイテム)全てが対象になり、上の例では縦横5分割(全てのセルが50px×50px)になっているので、ラインは1～6までになります(ラインは0ではなく1から始まります)
グリッドレイアウト範囲
グリッドレイアウトできる子要素
グリッドで分割された最小マス目
デフォルトではアイテム要素の幅・高さに依存
グリッドの基準線
ラインは0ではなく1から始まります…大事なことは2度云う
セルの高さを px や em や ％ で定義します、リキッドの場合は fr という単位を使用
grid-template-rows:38% 62%; /* 高さ比率＠38％：62％ */ grid-template-rows:1fr 3fr 3em; /* 高さ比率＠(100％-3em)/4：3(100％-3em)/4：3em */ grid-template-rows:repeat(5, 24px); /* 高さ比率＠24px：24px：24px：24px：24px */
セルの幅を px や em や ％ で定義します、リキッドの場合は fr という単位を使用
grid-template-columns:38% 62%; /* 幅比率＠38％：62％ */ grid-template-columns:1fr 3fr 100px; /* 幅比率＠(100％-100px)/4：3(100％-100px)/4：3em */ grid-template-columns:repeat(3, 100px); /* 幅比率＠100px：100px：100px */
アイテム1つ1つに grid-column や grid-row を設定せずに、grid-area を直感的にレイアウトすることができます
grid-template-areas: "heaer header header" "leftNav mainContents rightAside" ". footer ."
セル同士の間隔を設定、column-gap で横間隔を、row-gap で縦間隔を個別に設定でき、縦横共通の場合は grid-gap で一括設定
column-gap:1em; /* セル同士の左右余白を1emに設定 */ grid-gap:5px; /* セル同士の上下左右余白を5pxに設定 */
高さを設定、基本的にはライン番号をスラッシュ区切りで指定
grid-row:3 / 6; /* ライン3～6までの高さに設定 */ grid-row:span 2; /* セル2つ分の高さに設定 */
幅を設定、基本的にはライン番号をスラッシュ区切りで指定
grid-column:2 / 5; /* ライン2～5までの幅に設定 */ grid-column:span 3; /* セル3つ分の幅に設定 */
幅や高さをスラッシュ区切りでまとめて設定
grid-row-start / grid-column-start / grid-row-end / grid-column-end
またアイテムに名前を付ける時にも使えます(更新性などを考えると、これって結構便利です)
grid-area:topLeftArea; /* アイテムに『topLeftArea』という名前を設定 */ grid-area:2 / 1 / 4 / 3; /* ライン2～4までの高さ・ライン1～3までの幅に設定 */ grid-area:1 / 2 / span 2 / span 4; /* ライン1からセル2つ分の高さ・ライン2から4つ分の幅に設定 */
『水洗いできるキーボード！』という、触れ込みにテンションが上がり、即購入した目の前にあるキーボードを css grid でレイアウトしてみました。
ちなみに購入してから2.3年ほど経ちますが、いまだに水洗いをしたことはございません…
いかがでしょうか？
かなり便利なものだという雰囲気だけでも伝わったでしょうか？
order と組み合わせればレスポンシブ対応時にも、イロイロと融通が利きます。
もちろん条件にもよりますが、上手く使いこなせばレイアウト自体のために、文章構造を妥協したり、タグ構造に無駄な入れ子を使用したりするなど、本来不必要な手間を省くことが可能になると思います。
おかげで、より一層 文章構造正当化・表示速度改善 などの本来マークアップする際に一番心掛けたい部分に注力できるのでないでしょうか。
珍しく真面目にシメてみた(￣^￣)ゞ
