Galería de Imágenes Responsive Metodo3 el mejor metodo

Fecha Publicación:       20 de Julio de 2019
Fecha Modificación:       05 de Enero de 2020

1.- Este es el mejor metodo para una galeria de imagenes usando en el atributo width en la funcion  calc   el porcentaje al 100%.
Ventajas la separacion de cada item (vertical y Horizontal 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>

En item  se puso -20px porque como son 3 item por columna y solo tenemos 2 separaciones verticales a cada separación le estamos dando 10px  (10x2=20px) 

Si fueran 4 item por columna tendriamos 3 separaciones verticales a cada separación le estariamos dando 10px  (10x3=30px) 

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

 

Articulo : 693 - Veces Leidas
Compartir Articulo: