Galería de Imágenes Responsive Metodo1 usando width y porcentaje

No es aconcejable usar Atributo width y ponerle un porcentaje de valor 

Problema si le ponemos un margen se rompe el flujo y solo mostraria 2 items asi le pongamos box-sizing: border-box; que lo hemos definido en la clase contenedor.

Usando el Atributo width y poniendo un ancho en porcentajes. 

<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 por logica general usamos un ancho ( width = 33.33% )
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}
.contenedor	img {display: block;width: 100%;margin-bottom: 10px}
.item{width: 33.33%;margin: 10px;}

Problema si le ponemos un margen se rompe el flujo y solo mostraria 2 items.

.item{width: 33.33%;margin: 10px}