画面幅に応じたレイアウト切り替え(狭:カードレイアウト 広:2カラムレイアウト(display: grid;使用))

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本」のPDF版265ページからの内容を写経しています。

おいしいカード

すごくおいしいカードレイアウトをつくります。
画面の幅のせまいデバイスで見ると、文字と画像が縦1列に並ぶよ。

おせちカード

おせちを今年は食べることができませんでした。
画面の幅のせまいデバイスで見ると、文字と画像が縦1列に並ぶよ。