floatもflexも古い?Grid Layout Moduleの時代が来るらしい
はじめに
大学3年生の時に、小学校の同窓会に行ったらWeb系の会社をやっている人間がいて、
数件の案件を手伝わせていただいたときがあった
その時にレイアウトの指導をしてもらった際、
自分はfloatを使っていた
『やっぱりfloat使うよね。時代はflexなんだよ。float使っているのはださいよ』
と言われ、flexを教えていただき自分はflexの魅力にやられ信者になった
それからサイトを見てflexで書かれたコードを笑い、flexを崇める日々が続いた
(おしゃれなサイトは大体flexを使ってる)
そんな僕がTwitterを見ていると、『flexは古い。時代はGrid Layoutだ』みたいな記事を見たので
1時間ほど調べた情報を書いていこうと思う
利点
・聖杯レイアウト問題というのを解決できるらしい
(Web業界にいたことはないので、初めて聞いた)
聖杯レイアウト問題とは
List ApartにMatthew Levine氏がIn Search of the Holy Grailというコラムを発表したらしい
彼が発表したのは
ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムレイアウト
- 中央のコンテンツは可変、両側のサイドバーは固定の幅
- マークアップではコンテンツは、2つのサイドバーより上に記述される
- コンテンツとサイドバーはそれぞれの内容にかかわらず、同じ高さ
- 最小限のマークアップしか必要にならないこと
- コンテンツの量が少なかったとしても、フッターはページの下部に固定されること
下記の画像がわかりやすい?
http://coliss.com/wp-content/uploads-201602/2016040912-02.gif
・アイテム間の余白調整が手軽
・簡潔に書ける
対応ブラウザ
- Chrome 57 (2017年3月)
- Firefox 52 (2017年3月)
- Safari 10.1 (2017年3月)
- iOS Safari 10.3 (2017年3月)
- Internet Explorer 10 (2017年3月)
- Edge 12 (2017年3月)
2011年頃?に生まれ技術らしい
だが、最近にモダンなブラウザが一気に採用し、
使っても大丈夫な感じになった
(これから流行っていくのかな?)
用語
- グリッドトラック
- 列・行のこと
- グリッドライン
- 列・行を分割した線
- グリッドアイテム
- グリッドコンテナ直下の子要素
STEP1 マークアップ
index.html
<head> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="header">header</div> <div class="main">main</div> <div class="aside">aside</div> <div class="nav">nav</div> <div class="footer">footer</div> </div> </body>
reset.css
/**************************************************************** 共通部分 ****************************************************************/ /*reset*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{ margin: 0; padding: 0; } html{ } h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; } ol, ul{ list-style:none; } fieldset, img{ border:0; } table{ border-collapse: collapse; border-spacing:0; } caption, th{ text-align: left; } address, caption, cite, code, dfn, em, strong, th, var{ font-style: normal; font-weight: normal; } img { vertical-align: bottom; } html { font-size: 10px; font-size: 62.5%; } a { color: #000; text-decoration: none; } /**************************************************************** 今回だけ ****************************************************************/ .container { background-color: #FF0000; font-size: 20px; height: 100vh; } .header { background-color: #0000FF; } .main { background-color: #FFFF00; } .aside { background-color: #FF00FF; } .nav { background-color: #00FFFF; } .footer { background-color: #008000; }
style.css
.container { display: grid; }
diplay: grid;を指定することで、
コンテナである
<div class="container"></div>
の大きさに合わせて
グリッドアイテムの大きさが均等になったと思います
指定なし
grid指定
STEP2 コンテナを設定しよう
style.css
.container { display: grid; /*以下の行を追加*/ grid-template-columns: 100px 1fr 200px; grid-template-rows: 600px 1fr 300px; }
2行を追加したことにより、
columは3行になったと思います
- grid-template-columns: 100px 1fr 200px;
- columnの長さを設定している
- grid-template-rows: 600px 1fr 300px
- rowsの長さをしている
- 1frとは?
- コンテナからpxや%を引いた値
上記の例でウィンドウのwidthが980pxの場合、
1fr = 980px - (100px + 200px) = 680pxとなる - grid-column-start: 1;
- カラム方向のグリッド始まりを1本目に指定している
(横の大きさの最初を指定) - grid-column-end: 4
- カラム方向のグリッド終わりを4本目に指定している
(横の大きさの終わりを指定) - grid-row-start: 1;
- ロウ方向のグリッド始まりを1本目に指定している
(縦の大きさの最初を指定) - grid-row-end: auto;
- ロウ方向のグリッド終わりを2本目に指定している
(縦の大きさの最後を指定)
-
STEP3 グリッドアイテムの大きさを設定しよう!
style.css
.header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: auto; } .main { grid-column-start: 2; grid-column-start: auto; grid-row-start: 2; grid-row-end: auto; } .aside { grid-column-start: 1; grid-column-end: auto; grid-row-start: 2; grid-row-end: auto; } .nav { grid-column-start: 3; grid-column-end: auto; grid-row-start: 2; grid-row-end: auto; } .footer { grid-column: 1 / 4; grid-row: 3; }
headerだけ見てみると
autoを指定することで、startで指定したグリッドラインの次のグリッドラインを指定することができる
省略した書き方も可能
ブラウザで表示したらこんな感じになると思います
(わかりやすさ重視で適当にピクセル指定したら、めちゃくちゃださい感じになってしまった笑)
最後に
Grid Layoutはすごくわかりやすく、使いやすかったです
grid-column-gapなどでグリッドアイテム通しの幅を指定できたりもします
(アイテム間の距離を指定って結構面倒なんだよね)
他にも色々プロパティはあるので興味があったら調べてみてください
Grid Layout...本当にサンプルをコピーしただけでしたが、僕は結構気に入りました
知っていて損ではない技術だと思います