Gridレイアウトで画像がオーバーフローするときの対処法

Gridレイアウトを利用した際に、画像がgrid-template-columnsで定めた幅を超えて、オーバーフローして表示されてしまったときの対処法です。

画像のCSSで、max-widthに100%を指定します。

.wrapper {
  img {
    max-width: 100%;
  }
}