Galería de Imágenes Responsive Metodo2 usando width y funcion calc

Usando La función CSS CALC()  y porcentaje 33.33% para mostrar 3 columnas.
El problema es que la separacion de cada item (vertical y Horizontal no es el mismo tamaño).

<div class="contenedor">
  <div class="item">		
    	<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png">
  </div>  
  
  <div class="item">		
    	<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
  </div>  
  
  <div class="item">		
    	<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
  </div>  
  
  <div class="item">		
    	<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
  </div>  
  
  <div class="item">		
    	<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
  </div>   
  
</div>

Si queremos mostrar 3 columnas en este caso usaremos La función CSS CALC() 

Recuerda el display: block en img es para quitarle el espacio debajo de cada item , en vez le ponemos margin-bottom

.contenedor{ display: flex;flex-wrap: wrap;box-sizing: border-box;
justify-content: space-between;width: 100%;}
.contenedor img {display: block;width: 100%; text-align: center;}
.item{  width: calc((33.33% - 10px)); margin-bottom: 10px;}