概要

失敗例

(実行結果が見にくいのでCodePenに移動するか下部の「0.5x」ボタンを押してください)

一見実装できているように見えるが、一番最後のハムスターのカードに文章が1文増えると…

レイアウトが崩れ、カードボックスとフッターの間に大きく余白ができてしまう。

card を display: inline-block ではなく display: block に変更
card の下部の余白を margin-bottom で調整するのではなく、
card の外側に配置した card-wrapper の padding-bottom で調整する
カードの並び全体を中央揃えにするため、 card-box の外側に card-box-wrapper を配置して display: flex で調整
カード列の余白を調整するため、　card-box の column-gap を調整