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%

}

Source, inspiration, ressources :

CSS multiple column layout

Article CSS tricks ^(EN)