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;
}