Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

感動したこと
grid-areaが最高。レスポンシブ対応が親要素の3行で済んだ。

序: 限られたHTML構成

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

変更前HTML

SEO対策しつつサイト構造的にモジュール化もいける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>3行程度の抜粋文章</p>
                    </blockquote>
                </div>
            </article>
        </li>
    </ul>
</div>

変更後HTML

.wapper配下はマークダウンでかける構造にした。

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

マークダウン

マークダウンにするとこんな感じですかね。
WordpressのAddQuickTagプラグインを使い.wrapperを入れたdivで囲む操作イメージです。

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

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

破: grid採用の経緯

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

スクリーンショット 2018-11-29 10.23.41.png

【壁1】Table組みができない

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

スクリーンショット 2018-11-29 10.37.26.png

【壁2】 flexだとめんどくさい

じゃあflexは?としたら、1行+2行の2カラム表示がしんどいです。

スクリーンショット 2018-11-29 10.48.32.png

↑flexbox-playground様

【打破策】じゃあgridで

floatでさっくり実現るんですが今更floatでレイアウトはしたくないので、CSS Grid(以下Grid)に挑戦することにしました。
Corder'sHigh2018では大盛り上がりしたそうですね。
私は家庭の事情でその前に会場離脱したので残念でした。

Can I use...で調べたらIE10,11以外は対応できてるっぽいんで、詳しくは確認はしないままとりあえず使ってみます。
※IE対応については後述
スクリーンショット 2018-11-27 11.36.44.png

とりあえずやってみよう

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

スクリーンショット 2018-11-29 10.52.32.png

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;
}

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

急: レスポンシブ解決

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

スクリーンショット 2018-11-29 10.54.24.png

  • grid-template-are'areaA' 'areaB' 'areaC'になります。
  • grid-template-columnsは1カラムなので、1frでいいかな。autoでもいいかも。
  • grid-template-rowsは、画像が縦max120px、1行の件目->行間0.5emの高さ、抜粋文章->残りの高さだから120px 2em 1fr
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の符号変えなくても良いんだとここで気づきました。

え、楽。

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

IE11対応について

autoprefixerがなんとかしてくれます。v8.6以上、11月末現在v9.3.1推奨です。
IE10は忘れてください。
- CSS Grid in IE: Duplicate area names now supported! | CSS-Trick

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away