エンジニアの卵の成長日記

https://blog.toru-takagi.dev/profile/

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



・アイテム間の余白調整が手軽
・簡潔に書ける


対応ブラウザ

f:id:kurowasi2525:20170614014028p:plain


2011年頃?に生まれ技術らしい
だが、最近にモダンなブラウザが一気に採用し、
使っても大丈夫な感じになった
(これから流行っていくのかな?)





用語

グリッドトラック
列・行のこと
f:id:kurowasi2525:20170614015330p:plain
グリッドライン
列・行を分割した線
f:id:kurowasi2525:20170614015653p:plain
グリッドアイテム
グリッドコンテナ直下の子要素
f:id:kurowasi2525:20170614015926p:plain


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>

の大きさに合わせて
グリッドアイテムの大きさが均等になったと思います


指定なし
f:id:kurowasi2525:20170614021518p:plain


grid指定
f:id:kurowasi2525:20170614021541p:plain



STEP2 コンテナを設定しよう

style.css

.container {
    display: grid;
    /*以下の行を追加*/
    grid-template-columns: 100px 1fr 200px;
    grid-template-rows: 600px 1fr 300px;
}

2行を追加したことにより、
columは3行になったと思います

f:id:kurowasi2525:20170614022035p:plain

grid-template-columns: 100px 1fr 200px;
columnの長さを設定している
grid-template-rows: 600px 1fr 300px
rowsの長さをしている
f:id:kurowasi2525:20170614023118p:plain


1frとは?
コンテナからpxや%を引いた値
上記の例でウィンドウのwidthが980pxの場合、
1fr = 980px - (100px + 200px) = 680pxとなる
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だけ見てみると

grid-column-start: 1;
カラム方向のグリッド始まりを1本目に指定している
(横の大きさの最初を指定)
grid-column-end: 4
カラム方向のグリッド終わりを4本目に指定している
(横の大きさの終わりを指定)
f:id:kurowasi2525:20170614031153p:plain
grid-row-start: 1;
ロウ方向のグリッド始まりを1本目に指定している
(縦の大きさの最初を指定)
grid-row-end: auto;
ロウ方向のグリッド終わりを2本目に指定している
(縦の大きさの最後を指定)
f:id:kurowasi2525:20170614031156p:plain


autoを指定することで、startで指定したグリッドラインの次のグリッドラインを指定することができる

省略した書き方も可能
f:id:kurowasi2525:20170614025350p:plain

ブラウザで表示したらこんな感じになると思います
(わかりやすさ重視で適当にピクセル指定したら、めちゃくちゃださい感じになってしまった笑)

f:id:kurowasi2525:20170614025525p:plain


最後に
Grid Layoutはすごくわかりやすく、使いやすかったです
grid-column-gapなどでグリッドアイテム通しの幅を指定できたりもします
(アイテム間の距離を指定って結構面倒なんだよね)

他にも色々プロパティはあるので興味があったら調べてみてください


Grid Layout...本当にサンプルをコピーしただけでしたが、僕は結構気に入りました
知っていて損ではない技術だと思います