grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));:
repeat(auto-fill, minmax(400px, 1fr)): グリッドのカラムを自動的に繰り返すように設定するものです。
auto-fill: コンテナの幅に収まる限り、できるだけ多くのカラムを生成します。
minmax(400px, 1fr): 各カラムの最小幅を400pxに設定し、最大幅は利用可能なスペースを他のカラムと均等に分け合います。
ここで、1frはフラクションユニットという意味です。【fraction=断片】
利用可能なスペースのうちの1つの割合を意味します。つまり、グリッドコンテナの幅が余っている場合、この余ったスペースを均等に各カラムに分配します。
ギャラリー内の画像が常に少なくとも400pxの幅を持ち、利用可能なスペースに応じて柔軟に配置されます。
結果として、画面サイズに応じて画像の配置が変わり、レスポンシブデザインが実現されます。