CSS Grid Columns auto-fit

grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr))

Separemos este código por partes:

Auto-fit vs Auto-fill

auto-fill Rellena la fila con tantas columnas como quepan. Porque está intentando FILLear la fila.

auto-fit Hace que las columnas que hay rellenen todo el espacio disponible.

Minmax

minmax define un rango de tamaño mayor o igual que el mínimo y menor o igual que el máximo.

Es decir, si usamos minmax(100px, 400px) las columnas podrán ser como mínimo de 100px y como máximo de 400px.

Min

min selecciona el valor más pequeño de entre los dos. En este caso usamos min(100%, 400px) lo que significa que, si el ancho es menor de 400px, usaremos el 100% del ancho. Si es mayor de 400px, usaremos 400px.

Esto evita overflows en pantallas muy pequeñas, ya que si usásemos minmax(400px, 1fr) podríamos sufrir overflow cuando el container es menor de 400px.