（grid）とは

意味的には格子・網目状という意味です。
その名の通り、エクセルのセルのような格子状マスにタグを入れてレイアウトする事ができるみたいです。
分け方も自由な分け方、例えば４列・2行等のように使う事できます。
さ・ら・に！
それぞれのマスを紐づけることができるみたいで、positionやflexでは作る事が困難なL字の記事とかも、比較的簡単に作る事が出来ます！

これは素晴らしい！

100×100で割ってピクセル画なんて事も…？
知識０の私にはこれがとても使いやすそうな気がします。

（flex）レイアウトを使った練習問題

前日記事である「何故か」CSSが無かった練習問題ですが、私には結構な難題になりました。
形としては

1. （Div）
2. （上段Div img＋（Div【アイコン+h2】下にコメント））
3. （下段Div img＋（コメント））
4. （aタグ）
5. （/Div）

という構造になると考えて、その体でhtmlでマークアップ。
文字で表現しようとすると難しいな…。

試行錯誤

少しずつCSSを書き込んでいく。
まずは上段imgを想定サイズに設定。そうするとどうしてもアイコンがその設定に引っ張られて大きくなる。
「中身のDivなのに何故だ？」なんて考えながら、アイコンに直接class設定をしても同じ…。
どうしてもできなくてAIちゃんに泣きついたら。
「上段Div imgでサイズ設定してるからその設定に引っ張られてる」
という事で「上段Div img」をclassで指定してサイズ設定すると、上手に行きました。

（a）タグもflexで中央に並ぶし、後は外Divをflex整列で縦に並べるだけ！と思い意気揚々とflex設定に。
そうすると…完全にレイアウトが崩れ「作ってた4つのタグが【全部横並び】」になってしまった。
「(ꐦ°Д°)なんでや～！」とflexを解除して、htmlとCSSを見直す。
「上・下段Divは出来てる…、もう一段Divで包むか…？」
プログラムとにらめっこしても答えは出せず、動画を見て気晴らしをしていると…。
「ン…？待てよ…。４つ…？」
そう、私は大きな勘違いをしてました。

原因「勘違い」

そもそも「html」の段階で「上段Div」と「下段Div」は分けて構成した。
何故、今まで２段にできてたその型が崩れて「４つ全部が横並び」になったのか。それは…。
「４つが横並びになって崩れた」のではなくて「２つのタグを持つ２つのＤｉｖが横に並んだ」状態。
試しに一番外のＤｉｖを（flex-direction:column）で設定したら、完全に思い通り『上段Div・下段Div』に分かれた型になってくれました。
flex設定をした時の確認は指定通り「横並び」にしてくれていたのです。
それを「上下にできてたレイアウトが崩れた！」という『勘違い』が原因でした（笑）

例題での学び

1. flexは指示通りに動いてた
2. 崩れたのではなく、そう配置されていた
3. まず「構造」と「指定対象」を疑う

間違いの多さ

スペルミス・継承システム失念・見た目の勘違いと、様々な「何でや！」を感じた難題でした（笑）

『踏めるミスは全部踏み潰して歩きたい』

これを体現していこうと思います（笑）