違い矢アイコンCSS Grid Layoutを使ってみた!

IE対応がよく判らないので、二の足を踏んでいた『CSS Grid Layout』の採用だが、メニューページ「コース料理の豆知識」に使ってみた。
結局、カスタマイズするしかなかったのだが、試行錯誤するうちに何となく理解出来るようになった。サイト全体をこれで構成するのは気が遠くなりそうだが、今回のような部分採用を繰り返すうちにいずれそういう日も来るのかも知れない。レイアウト画像(下)では、分かりやすいようグリッドに着色してみた。480px以下で1カラム表示に切り替わる。
参考ページ
【Should I try to use the IE implementation of CSS Grid Layout?】 https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
【CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス】 https://www.webcreatorbox.com/tech/css-grid-layout