「display:grid」を使ってみた感想
最近、今後主流になるであろうレイアウトということで、グリッドプロパティを初めて使ってみたのでその感想などについて書いてみたいと思います。
グリッドレイアウトはWEBレイアウトを救うか?
グリッドレイアウトといえばブートストラップが有名でしたね。
12個ある格子状のグリッドを使ってレイアウトを組んでいく。
これはこれで画期的であり、「sm」やら「x-sm」などといったクラス名がHTMLファイルにバンバン書き込まれていたのをよく見かけました。
ブートストラップはパーツも含めてあまりにテンプレ臭が強かったため、のちに「ブートストラップ臭の強いサイト」などと揶揄されやすくなり、最近はひっそりとしていますが、しばらくは猛威を奮っていたフレームだったと思います。
しかし現在のグリッドレイアウトはその頃とは根本的に考え方が違っていて、12グリッドという定形に当てはめてレイアウトするような形にはなっていません。
グリッドレイアウトの書き方にも種類がある
「display:grid」というプロパティが登場して、多面的レイアウトが組めるようになったといわれています。
今までDTPで組んでいたような重なりのあるレイアウトなども、組みやすくなったし、レスポンシブ対応も組みやすくなったといわれていますが、それは本当なのでしょうか
なにより、「display:grid」を使いこなすにはその種類もいくつかあるということです。
サンプル
body {
display: grid;
grid-template-areas:
“head head head”
“side1 main side2”
“foot foot foot”;
grid-template-columns: 1fr 5fr 200px;
}
.header {
grid-area: head;
}
.nav {
grid-area: side1;
}
.main{
grid-area: main;
}
.sidebar {
grid-area: side2;
}
.footer {
grid-area: foot;
}
とこのように<body>を中心としたレイアウトを組む場合もあります。
グリッドレイアウトの仕組み
まずは見てみましょう
grid-template-areas:
“head head head”
最初にheadがみっつ並んでいますが、つまりは3カラムの一段目にはすべてheadが入るということです。
.header {
grid-area: head;
}
そしてheadのエリアに入るのはheader
つまり最初に一段目はすべてheaderとなります。
次に
grid-template-areas:
“side1 main side2”
.nav {
grid-area: side1;
}
.main{
grid-area: main;
}
.sidebar {
grid-area: side2;
}
となっているので
二段目の3カラムは左からnav main sidebarと並ぶこととなります。
最後に
grid-template-areas:
“foot foot foot”;
.footer {
grid-area: foot;
}
となっているのでfooterが、header同様三段目を占領しています。
ヘッダー ヘッダー ヘッダー
ナビ メイン サイドバー
フッター フッター フッター
つまりはこのように並んでいるということです。
そして最後に
grid-template-columns: 1fr 5fr 200px;
}
とありますが、これはナビ メイン サイドバー、3カラムの比率です。
「1fr 5fr」とはナビとメインの比率は1:5となり、最後のサイドバーは200pxの固定で表示されるという意味になります。
当然ヘッダーやフッターもこの比率で分けられているのですが
grid-template-areas:
“head head head”
“foot foot foot”;
となっているため、「結果的にワンカラム」で表示されているということです。
正直ちょっとややこしいです。
しかしこれなんぞはまだ初歩のほうでグリッドレイアウトの書き方は更にフクザツ化しています。
碁の目でレイアウトを組む
サンプル
body {
display: grid;
grid-template-columns: 1fr 700px 50px 300px 1fr;
grid-template-rows: auto auto 40px auto 30px auto;
}
.header {
grid-column-start: 2;
grid-row-start: 1;
}
.nav {
grid-column-start: 1;
grid-column-end: -1;
grid-row-start: 2;
display: grid;
grid-template-columns: inherit;
grid-template-rows: auto;
}
.nav ul {
grid-column-start: 2;
grid-column-end: -2;
}
.main {
grid-column-start: 2;
grid-row-start: 4;
}
.side {
grid-column-start: 4;
grid-row-start: 4;
}
.footer {
grid-column-start: 1;
grid-column-end: -1;
grid-row-start: -2;
display: grid;
grid-template-columns: inherit;
grid-template-rows: auto;
}
とこのように「grid-column」やら「grid-template-rows」などと出てくると完全に碁の目レイアウトになってきて見てるだけだとよくわからなくなります。
たとえば読みやすさを優先するために文字をマークアップしてから左右をpaddingで詰めるといったやり方はwebでは定番の方法だと思います。
しかし新しいグリッドレイアウトではそのpaddingやmarginの隙間すらも1カラムとして計算しながら緻密にレイアウトを組むのです。
これはかなりしっかりフレームを組まないと色々な勘違いを生みやすく、慣れるのにもちょっと時間がかかりそうです。
グリッドレイアウトの考え方
実際にグリッドプロパティを使ってみて感じたことは
「これはモバイルファーストの考え方ではない」
そう感じました。
レスポンシブサイトを構築していく上で、それが「float」を使っていようとも「flex」を使っていようとも、最初はモバイルでどう見えるかを作っていきます。
そしてパソコンで表示される時にカラムを分け、そのために「float」や「flex」といったプロパティが使われていたと思います。
しかし「display:grid」は、最初にパソコンレイアウトを作り込んでからメディアクエリを使ってモバイルビューを作っていくタイプのようです。
グリッドプロパティでブレイクポイントの書き方が変わるのか?
つまりブレイクポイントの使い方も
「min-width:800px」あるいは「min-width:768px」
といった今まで多かった「ipadサイズ」を意識したモバイルフレンドリーの記述ではなく
「max-width:599px」
といったモバイルのメディアクエリが後から上書きされる形になっていきます。
これは現在のサイト構築の基本である「モバイルファースト」とはちょっと考え方がやや本末転倒な気がしています。
コーディングの順番としては逆な気がするのです。
それとも今後は、パソコンレイアウトありきで、それからモバイル構築という先祖返りな考え方が主流になっていくのでしょうか?
実際にグリッドでレイアウト組んでみて「フクザツだなー」と感じました。
「右から何列目、左の下から何番目」
といった碁の目でレイアウトを組んでいくイメージです。
ということは
container{
margin: 0 auto;
}
としたコンテナのセンター寄せを使っても、一番はじからカウントしてレイアウトを考えていかなければならなくなります。
これはワイヤーをかなりしっかり組んでおかないと、数字のカンチガイがかなり増えてくるプロパティだと思います。
現状的には、特別なレイアウトの時以外は使わない方向でいこうかと考えています。
てゆうより、今後もっと簡易的にコーディングできる方法が出てきそうな気がしているので、しばらくは「見」でいいかなと思っています。
Leave a comment