グリッドレイアウトで習った「 gap 」が突然出てきて困惑しました。
flexbox とグリッドレイアウトは別物という認識でしたが、今回のように組み合わせて使うことも多いのでしょうか。
グリッドレイアウトのところにあった Q&A から、flexbox で表現できないような複雑なレイアウトをしたいときにグリッドレイアウトを使うという理解でした。

なお gap: 16px; は justify-content: space-between; でも置き換えられるのでは？と思い試しましたが、主軸方向の商品画像間の余白しか作れなかったため、交差軸方向の指定 align-items: space-between; も書き加えてみましたがだめでした。これはなぜでしょうか？

MDN やネットで調べたりレッスンを見返したりしてもわからなかったため、教えていただきたいです。