Brooklyn posters, Yonghyun Lee on Unsplash Brooklyn posters, Yonghyun Lee on Unsplash

Créer un layout fluide type Masonry en CSS

En cherchant à limiter les requêtes JavaScript sur mon site, je me suis posé la question s'il était possible de remplacer le script Masonry par des CSS. Et la réponse est oui.

Méthode CSS pour remplacer Masonry

Comme le script Masonry, on va utiliser les colonnes pour réagencer nos blocs grâce au module de positionnement multicolonnes CSS3.

HTML

On commence par créer un bloc div qui va nous servir de conteneur et on lui applique les classes .container et .colonnes.

On place le contenu dans le conteneur, des images dans cet exemple.

<!-- HTML -->
<div class="container colonnes">
<img
src="http://lorempixel.com/640/480/sports/5"
alt="lorempixel" />

<img
src="http://lorempixel.com/512/720/animals/9"
alt="lorempixel" />

...
</div>

CSS

Avec la classe .container on fixe la largeur maximum du bloc, on le centre dans la page et on lui applique une valeur de padding.
La classe .colonnes va définir le comportement du contenu du bloc.

Par défaut, on affiche le contenu dans 3 colonnes, on fixe la valeur des gouttières et de la largeur des colonnes. On place ensuite des media queries pour adapter nos colonnes en fonction de la taille de l'écran.

On termine en appliquant à la balise img des valeurs de hauteur et de largeur adaptatifs.

/* CSS */
.container {
margin: 0 auto;
max-width: 960px;
padding: 20px;
}
.colonnes {
column-count: 3;
column-gap: 20px;
column-width: 33.33333333333333%;
}
@media screen and (min-width: 480px) and (max-width: 727px) {
.colonnes {
column-count: 2;
column-width: 50%;
}
}
@media screen and (max-width: 479px) {
.colonnes {
column-count: 1;
column-width: 100%;
}
}
img {
width: 100%;
height: auto;
margin-bottom: 15px;
}

Résultat