Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Galerie masonry CSS multi-column

Le code :



<div class="galerie">

<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>
<div><img src="image.jpg" alt></div>

</div>




*{box-sizing:border-box}

.galerie {

  columns: 4 20ch; /* 4 colonnes max */
  padding: 1.5rem;
  gap: 1.5rem;
  
}

.galerie div{
  background-color: #ddd;
  break-inside: avoid;
  margin-bottom: 1.5rem;
 
}

.galerie img {

display: block;
max-width: 100%

}





Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.