CSS Gridを初めて使って感動したこと

感動したこと
<font color=#f00>**grid-areaが最高。レスポンシブ対応が親要素の３行で済んだ。**</font>

# 序: 限られたHTML構成

wordpressを利用したブログ記事内のマークアップを簡略化する案件がありました。
当初はSEOを意識しつつほかページでもモジュール的に使う方針のため、けっこう複雑なマークアップでした。
それが記事量産フェーズにはいり、運用の手間削減の目的でwordpressの入力機能を併用しつつ**マークダウンで入力できるHTML構造**に変更することになりました。
PDCA回せてる証拠ということで。

## 変更前HTML
SEO対策しつつサイト構造的にモジュール化もいけるHTML

```html:変更前HTML
<div class="wrapper">
    <ul>
        <li>
            <article>
                <p>
                    <a href="#">
                    <img src="http://placekitten.com/g/140/20" alt="サムネ画像">
                	</a>
                </p>
                <div>
                    <h3>
                        <a href="#">一行の件名</a>
                    </h3>
                    <blockquote>
                        <p>３行程度の抜粋文章</p>
                    </blockquote>
                </div>
            </article>
        </li>
    </ul>
</div>
```

## 変更後HTML
`.wapper`配下はマークダウンでかける構造にした。

```html:変更後HTML
<div class="wrapper">
    <h3><a href="#">一行の件名）</a></h3>
    <a href="#"><img src="http://placekitten.com/g/140/20" alt="サムネ画像"></a>
    <blockquoe>
        <p>３行程度の抜粋文章</p>
    </blockquote>
</div>
```

### マークダウン

マークダウンにするとこんな感じですかね。
Wordpressの[AddQuickTag](https://ja.wordpress.org/plugins/addquicktag/)プラグインを使い`.wrapper`を入れたdivで囲む操作イメージです。

```md:マークダウンver
<div class="wrapper">
### [一行の件名](ジャンプ先URL)
[画像URL]（ジャンプ先）
> ３行程度の抜粋文章
</div>
```

これでコード量としては最低限になりました。
pは無くてもいいんですがあると便利だったのでそのままにしてます。

# 破: grid採用の経緯

ただこいつ、PC表示ではサムネ画像を左においた２カラム、スマホでは縦３行の１カラムレイアウトなんです。
変更前は`display:table;`を使ってレイアウトしてました。

<img width="836" alt="スクリーンショット 2018-11-29 10.23.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/54497/bf157fca-04f3-494d-7ed3-364cdf27a803.png">

## 【壁１】Table組みができない
マークダウン対応するためにtable組みしようとしたら、`tr`を増やせないんでPC/スマホのレイアウト切り替えが実現できません。

<img width="642" alt="スクリーンショット 2018-11-29 10.37.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/54497/e6fa65fb-b3ad-a8c9-e69f-6653d112eeff.png">

## 【壁２】 flexだとめんどくさい
じゃあflexは？としたら、１行＋２行の２カラム表示がしんどいです。

<img width="643" alt="スクリーンショット 2018-11-29 10.48.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/54497/aee64017-6f0b-0a1d-e3b7-cdbf1b398846.png">

[↑flexbox-playground様](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

## 【打破策】じゃあgridで
`float`でさっくり実現るんですが今更floatでレイアウトはしたくないので、**CSS Grid**（以下Grid）に挑戦することにしました。
[Corder'sHigh2018](http://cssnite.jp/lp/lp58/)では大盛り上がりしたそうですね。
私は家庭の事情でその前に会場離脱したので残念でした。

[Can I use...](https://caniuse.com/#feat=css-grid)で調べたらIE10,11以外は対応できてるっぽいんで、詳しくは確認はしないままとりあえず使ってみます。
**※IE対応については後述**
![スクリーンショット 2018-11-27 11.36.44.png](https://qiita-image-store.s3.amazonaws.com/0/54497/ebc4a786-22c5-2653-427a-f470286336b0.png)

### とりあえずやってみよう
まずは面倒くさいPCの２カラム表示。
慣れないんでマッピング作って、areaAが1-1と2-1、areaBが1-2、areaCが2-2と指さしながらやりました。

<img width="565" alt="スクリーンショット 2018-11-29 10.52.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/54497/0f8aafc0-149a-909a-fdf1-ad2427ea4440.png">

```css:css
.wrapper {
  display: grid;
  grid-template-areas: 'areaA areaB' 'areaA areaC';
  grid-template-columns: 120px 1fr;// 画像横最大120px
  grid-template-rows: 3em 1fr;// 一行件名の行間1.5em（で高さとする）
}

.wrapper > h3 {
  grid-area: areaB;
}
.wrapper > a {
  grid-area: areaA;
}
.wrapper > blockquote {
  grid-area: areaC;
}
```

割とさらっとできました。
これをメディアクエリ使って１カラム表示にするんですが、
マッピング設定直し面倒だなあ、と思ってたんですね。



# 急: レスポンシブ解決

スマホのマッピングは、areaAが1、areaBが2、areaCが3となります。
「3」が増えたところでしんどい気分です。

<img width="414" alt="スクリーンショット 2018-11-29 10.54.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/54497/c591256b-0488-e9f3-def2-9aeeaae8e7e8.png">

- `grid-template-are`は `'areaA' 'areaB' 'areaC'`になります。
- `grid-template-columns`は１カラムなので、`1fr`でいいかな。autoでもいいかも。
- `grid-template-rows`は、画像が縦max120px、１行の件目->行間0.5emの高さ、抜粋文章->残りの高さだから`120px 2em 1fr`


```css:css
// スマホサイズ
.wrapper {
  display: grid;
  grid-template-areas: 'areaA' 'areaB' 'areaC';
  grid-template-columns: 1fr;
  grid-template-rows: 120px 2em 1fr;
}
@media screen and (PCサイズ) {
  .wrapper {
    grid-template-areas: 'areaA areaB' 'areaA areaC';
    grid-template-columns: 120px 1fr;
    grid-template-rows: 3em 1fr;
  }
}

.wrapper > h3 {
  grid-area: areaB;
}
.wrapper > a {
  grid-area: areaA;
}
.wrapper > blockquote {
  grid-area: areaC;
}

```


あれ、親要素設定しただけでできた。
子要素の`grid-area`の符号変えなくても良いんだとここで気づきました。

<font color=#f00>**え、楽。**</font>

あとは検証もそこそこにレビューを同僚に投げて完了です。
よろしくお願いします。

# IE11対応について

autoprefixerがなんとかしてくれます。v8.6以上、11月末現在**v9.3.1推奨**です。
IE10は忘れてください。
- [CSS Grid in IE: Duplicate area names now supported! | CSS-Trick](https://css-tricks.com/css-grid-in-ie-duplicate-area-names-now-supported/)