レスポンシブ対応に心浮き立つ

夫と一年お疲れ様でしたの慰安旅行（湯河原＆箱根に2泊3日）に出かけていたため、しばらく学習はストップしていましたが、今日から再開です。

本日はCSSグリッドレイアウト入門（全10回）の第2回と第3回の学習日誌。視聴時間は合計5分32秒でした。

#02 グリッドコンテナを用意しよう

第2回はHTMLのマークアップから。下のようにコーディングして、1〜9までの数字をグリッドコンテナで囲う設定をしました。

次にCSSのマークアップも行いました。1〜9までの各アイテムの背景色を指定。するとじゃん！

このようになりました。まだまだ準備段階ですね。

#03 行と列を設定していこう

第2回の続きです。CSSグリッドレイアウトを適用するということは、方眼紙のようなマス目に要素を配置していくということ。今回はマス目の設定を習いました。

ちなみに一つひとつのマス目をセルと呼ぶそうです。

練習で作ったものが下図になります。一行（＝grid-template-rows）に幅80pxのセルを3つ並べ、一列（＝grid-template-columns）に幅80pxのセルを3つ並べるというコードを書き、3×3のレイアウトを作りました。

また応用として、ウインドウ幅いっぱいに列を配置し、セルを敷きつめる方法も習いました（下図）。

この回はここで終了。レスポンシブ対応になってる様子が見られてちょっとウキウキしました。