複数列かつ縦並べのliタグをやっつける方法

サムネイル画像みたいなやつです。
1列目1行目を1,1列目2行目を2,1列目3行目を3…と続いていって、
1列目n行目をn,2列目1行目をn+1…みたいな順番でリストタグを並べたいという話。

例題とデモ

まずはデモをばご覧いただきたく。
ゴールはこんな感じのイメージです。

で、こんな感じのお題だったとします。

意外とこれ難しいんですよ。
試しにGrid Layout以外の方法で解決しようとしてみてください。
やったことあるけどなんかこんな感じで<li>タグを途中でぶった切って、
無理矢理<ul>タグを再度挟むみたいなJSで解決するしかなかったと思う。
横並びならFlexboxで解決するんすけどねー。　←詳しくは記事最下段を参照

そもそも、「左から右に流れていって、折り返して下に進んでいく」
ってのがWEBおよび英語圏のしきたりであって云々…
とか前提の時点からおかしい気もするんですけどね！( ,,Ծ ‸ Ծ,,)

・・・失礼。本題に入りましょう。
ともあれ、2018年のウェブの世界ではGrid Layoutという新しい武器がありますからね。
こういうめんどくさいこともCSSだけでやっつけることが出来るって寸法です。

CSSの解説

該当のHTML自体は<li>タグの子に<ul>タグが入ってて、
親の<li>タグにホバーすると子の<ul>タグが出現するっていうよくある作りです。

肝は子の<ul>タグに指定してある、display: grid;周りの設定です。
まず、grid-auto-flow: column;で縦並びになるよう設定します。
次にgrid-template-rowsで行数を指定、
grid-template-columnsで列数を指定します。

今回は最大行数が7、最大列数が2なので
rowsには7回autoを書かれていて、
columnsには2回autoが書かれているという具合です。
（auto auto auto auto…って並んでるとちょっとキモいですけどね）

これだけで子要素（.p01_nCLi）をサックリ縦に並べることが出来てしまうのです！
簡単ですね～。これで万事解決…

IEをやっつけろ

とでも思ったか？
ではこの状態でIE11で見てみましょう。ご覧の有様だよ！
（ちなみにEdgeだと崩れないです）

縦並びはおろか並んですらいないですね・・・。

なんとIEではgrid-auto-flowプロパティが使えません。
grid-template-rowsやcolumnsならば-ms-grid-rowsといったように
ベンダープレフィックスをつければどうにかなるのですが。
ところがどっこい、grid-auto-flowは-ms-を頭につけても使えません。
これが現実……！

ゴリ押しの攻略法を伝授します（他にいい方法があったら教えて）。　←あります
親要素から子要素を制御するのが駄目なら、
子要素で片っ端から表示順を制御すればいいという発想が上記のSassです。
（CSSで書くと無意味に文量が長くなってしまうのでSassで堪忍してください）

7行2列ってことは最大項目数は14なんで、
:nth-child(1)から:nth-child(14)まで生成して、
それぞれに並び順を振ってどうこうするって寸法です。
8番目の項目以降は2列目に配置するって記述です。

IEをやっつけるMixin

え、何？これじゃあ3列や4列の時どうすればいいんだって？
何回もif文書きたくないって？IEだけの処理だからCSSハックしたい？
しょうがないにゃあ・・・

へいお待ち。
@includeで呼び出して列数と行数の順に指定するだけで解決するマン（？）です。
脳味噌使わないでもコピペでどうにかなるやつなんでご活用くだしあ。

どうでもいいけど生まれて初めて世のため人のためにMixinを書きました。
結構躓いたし今度自習も兼ねてMixinの書き方みたいな記事も書こうかな…。

おわりに

Grid LayoutちゃんはFlexboxに比べると普及が遅れてますよね。
本格的に各ブラウザで対応されたのが2017年頃なんで無理もありませんが、
そろそろ現場でも使って行っても問題ない流れになってきました。

「知ってはいるけど結局使ったことがない」
「なんか苦手意識がある…」という方もいるかもしれませんが、
今回の例のようにGridならではの利点というのもあるので覚えておいて損はないと思います。：）

・・・・

・・・

・・

・

衝撃のオチ

記事書き上げて投稿する寸前に気づいてしまったあああああああああ
もっと簡単な方法があったじゃあああああああああああああん
Flexboxで出来るじゃああああああああああん
うわああああああああああああああああ（発狂）

・・・自戒のためにこの記事はこの記事で残しておきますが、
もっと簡単な方法を次回の記事で紹介いたします。