Probablemente esta pregunta se haya hecho cientos de veces, sin embargo, no pude encontrar una solución que funcionara para mí, envolví el contenedor de cuadrícula @mui dentro de div regular. Entonces padre div tiene:

 OuterContainer: { display:'flex', justifyContent:'center', height:"95%", width:"80%", margin:'1em', }

mientras que el contenedor de cuadrícula (que es un contenedor de imágenes) tiene:

 ImageContainer:{ height:"95%", backgroundColor: "#4C6D94", borderRadius:12, margin:'0 auto' }

Intenté usar display:inline-block en child div y muchas otras formas, pero nada funcionó.

Cualquier ayuda sería apreciada.