grid-template-areas　で　Gridレスポンシブ対応（QiitaのCSSを見てみた編）

Qiitaみたいに３柱レイアウトから１柱レイアウトまで可変で表示できるレスポンシブ対応がしたいな〜
そうだ、実際にCSSを見てみよう！

横幅いっぱいで、
{ランキング、コンテンツ　広告}　の３柱になってる時

grid-template-areas: "sidebar contents advertisement";

横幅狭め（max-width: 1199px）て、
２柱で、コンテンツの柱と、広告とランキングからなる柱
の時

grid-template-areas: 'contents advertisement' 'contents sidebar';

横幅をさらに小さく（max-width: 991px）して、1柱のみで、縦に　{コンテンツ、広告}　になってる時）

grid-template-areas: 'contents' 'sidebar' 'advertisement';

はあなるほど、grid-template-areasなるものが関係しているようだ。
MDNのgrid-template-areasのページ

はあーなるほど、クラス名{ grid-area: head;　}みたいにして内包されてる側（小さいほう）のクラスにgrid-areaでの名前をつけてあげて、内包する側（でかいほう）でgrid-template-areasのプロパティで並びを指定できるみたいですね。並び方は””のなかにちいさい方につけてあげた名前を（各行にあるエリア名の個数が等しくなるように）並べればいいのか。便利！　
確かにセマンティクス（意味論）に従ってHTMLを
重要度大
重要度中
重要度小
と書いて、
実際の表示では
中大小　（横並び）
にしたい時ありますもんね。

結論
メディアクエリーで区切ってやって内包する側にgrid-template-areasを書けばいいってことらしい。

しかし！　Tailwindで使いたいけどTailwindにはこの機能がない！　なんてこった！プラグインでその機能使えるようになるっぽいけど余計に煩雑になりそうだ。
（このプラグイン使ってらっしゃる方いたら使用感を教えてください。）

参考：Savvy Wombat 氏のGrid Areas for Tailwind CSS

多分似たような使い方したい時は、
メディアクエリとクラス名でorder-nを併用して３段階で順番分けしてGrid表示するんだろうなーっていう想像がつきます。それは次の機会にやります。　何か間違ってたら教えてください。