Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

CSS masonry Grid

Démonstration expérimentale. Sur Firefox 89.0 + et Firefox Nightly uniquement (pour l'instant) en activant le drapeau layout.css.grid-template-masonry-value.enabled

Code :

HTML


<div class="masonry">
<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>


CSS


.masonry {
	
max-width: 75rem;
margin:2rem auto;
display: grid;
grid-gap: 2rem;
grid: masonry / repeat(auto-fit, minmax(20rem, 1fr));

	}



.masonry div { 
 
background: silver;
border-radius: 1ch;
overflow: hidden

}


.masonry div img{

display:block;
object-fit: cover;
width:100%;
height:100%;
border-radius: inherit

}



Source, inspiration, ressources :

Documentation W3C .

Article de Bramus Van Damme EN

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

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.