Créer un affichage Masonry sans plugin

Voici un exemple de code css qui va nous permettre de spliter une page en plusieurs colonnes.

Ce code vaut pour des classes css  d’un thème wordpress par défaut.Pour tout autre cas, il suffira juste d’indiquer les bonnes classes dans votre fichier css

Voici donc un exemple de css qui vous permettra d’afficher vos articles en colonne sur la home page ou la page blog de votre thème wordpress :

body.blog div#content, body.archive div#content {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 0;
	-webkit-column-gap: 0;
	column-gap: 0;
}


body.blog article, body.archive article {
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100%;
}


@media only screen and (max-width : 1024px) {

	body.blog div#content, body.archive div#content { 
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
	}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

	body.blog div#content, body.archive div#content { 
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
}

@media only screen and (max-width : 768px) {

	body.blog div#content, body.archive div#content { 
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
}

@media (max-width : 480px) {
	body.blog div#content, body.archive div#content { 
			-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	
}

La propriété column-count permet de scinder la page en colonne mais attention, cela peut ne pas convenir dans tous les cas car les articles seront rangés de haut en bas et non de gauche à droite.A vous donc de voir s’il n’est pas plus utile d’utiliser un classique float: left ou display:inline, en fonction de vos besoins.

En fonction des styles du thème, il faudra sans doute jouer sur les marges des articles.et selon les cas il peut etre utile d’ajouter une propriété display: inline ou inline-block aux articles.

Afficher sa gallerie en colonne

Pour une gallerie wordpress, le principe est le même, on cible juste les classes gallery, et gallery-item

.gallery { 
	-moz-column-count:3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap:0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

.gallery-item{ 
    margin: 0;
    width: 100%;
   
}

@media only screen and (max-width : 768px) {
    .gallery {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (max-width : 480px) {
    .gallery {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

 

Grâce aux media queries, on aura nos trois affichages:

En mode destkop: 3 colonnes

masonry-style

 

En mode tablette: 2 colonnes

masonry-tablet

Et enfin en mode mobile: 1 seule colonne

masonry-mobile

Leave a Reply

Your email address will not be published. Required fields are marked *