お疲れ様です。
自己紹介ページにレスポンシブデザインを実装していなかったなーと思い、お昼からちょこちょこ編集していたところで、「fr（単位）」 のありがたみを感じました
フッターに写真を6枚ほど貼っていまして、 display:grid で、グリッドデザインにし、大きさをどうしようかと思っていた時、ちょこちょこメモしているノートを見ていると、「fr」という単位があることを発見しました。
私のメモによると、「親要素からみた子要素の大きさの割合を指定できる。画面の幅に合わせて伸縮させる」 ということです。
というわけで実装しました。
See the Pen Untitled by mtzkmy (@mtzkmy) on CodePen.
800pxくらいの画面では2列で、ノートパソコンなどの大きな画面では3列、4列で表示したいときは、親要素に grid-template-columns プロパティを使うことで、グリッド上の行や列を指定できます。
コードでは、1fr 1fr と、2つありますが、これを増やすと列が増え、減らすと列が減ります。
各クラスで大きさをpxで指定しているので、「画面の大きさに合わせて伸縮する」という特性は見られないのですが、pxの指定をせず、frのみの指定だと顕著だなと感じました。