CSS Grid Layoutの魅力はシンプルなソースコード！？

CSS Grid Layoutとは

格子状のグリッドに、アイテムを配置していく新しいhtml/cssのレイアウト手法。
新しいcssです。

新しいから、モダンブラウザでもやっとこサポート状態（2017.6時点）なので、
規模の大きい案件、サポートを広く持ちたい案件では使いづらいのですが……

覚えれば、シンプルコードで複雑なレイアウトが一発。

デモ

こんなレイアウトも。

<div class="grid-wrap">
    <div class="item01">
        item01
    </div>
    <div class="item02">
        item02
    </div>
    <div class="item03">
        item03
    </div>
    <div class="item04">
        item04 (2/4・・・2～4)
    </div>
    <div class="item05">
        item05
    </div>
    <div class="item06">
        item06
    </div>
    <div class="item07">
        item07 (2/4・・・2～4)
    </div>
</div>

htmlは全体のwrap以外は必要な要素だけで。

.grid-wrap{
    display:grid;
    grid-template-columns:100px 200px 1fr;
    grid-template-rows:100px 200px 1fr;
    
    div{
        border:solid 1px #ccc;
        padding: 5px;
    }
    
    div.item04{
        grid-row:2/4;
    }
    div.item07{
        grid-column:2/4;
    }
}

css（scss）もたったこれだけ

デモ2

この書き方なら、ページ全体のレイアウトを、gridで構築するのも簡単！

<div class="grid-wrap02">
    <div class="item01">
        item01 header
    </div>
    <div class="item02">
        item02 sidebar
    </div>
    <div class="item03">
        item03 main01
    </div>
    <div class="item04">
       item04 main02
    </div>
    <div class="item05">
       item05 main03
    </div>
    <div class="item06">
       item06 footer
    </div>
</div>

.grid-wrap02{
    display:grid;
    grid-template-columns:200px 1fr;
    grid-template-rows:100px 1fr 1fr 1fr  100px;
    
    div{
        border:solid 1px #ccc;
        padding: 5px;
    }
    
    div.item01{
        grid-column:1/3;
    }
    div.item02{
        grid-row:2/5;
    }
    div.item06{
        grid-column:1/3;
    }
}

使いどころ

レイアウトされる感覚でいえば、tableを使いたくなるような入り組んだレイアウト向き。

Flexboxもfloatで配置するのと比べれば柔軟な動かし方ができますが、
縦方向横方向自在にアイテムを配置していくならgrid layoutでしょうか……。

実際にはもっといろいろな置き方ができるので、下記の丁寧解説を参考に実際に置いてみるのが良い感じ。

CSS Grid Layout を極める！（基礎編）
CSS Grid Layout を極める！（場面別編）