Comment puis-je créer une mise en page de style maçonnerie à l'aide de CSS (et d'alternatives JavaScript) ?

Création de mises en page de style maçonnerie avec CSS

De nombreux concepteurs de sites Web s'efforcent de créer des mises en page dans lesquelles les blocs de contenu sont disposés en colonnes, chaque bloc s'adaptant à sa propre hauteur tout en conservant une apparence cohérente et esthétique. C'est ce qu'on appelle une mise en page de style maçonnerie.

Dans le passé, CSS seul n'était pas en mesure d'obtenir cet effet de manière efficace. Cependant, avec l'avènement de CSS3, nous disposons désormais d'une solution simple.

Solution CSS3

CSS3 introduit le concept de mises en page multi-colonnes, permettant aux développeurs de spécifier les nombre de colonnes et l'espacement entre elles. En définissant les propriétés column-count et column-gap, nous pouvons créer une disposition de style maçonnerie.

Par exemple, le code CSS suivant définit un conteneur avec deux colonnes et un espace de 10 pixels entre elles :

Chaque élément à l'intérieur du conteneur sera alors obligé d'occuper 100% de la largeur disponible au sein d'une colonne. Cela signifie que les blocs de différentes hauteurs s'empileront verticalement, créant l'apparence de style maçonnerie souhaitée.

Solution non CSS3

Si votre projet ne prend pas en charge CSS3, vous devra utiliser JavaScript pour obtenir une disposition de style maçonnerie. Il existe plusieurs bibliothèques JavaScript disponibles, telles que Masonry et Isotope, qui peuvent être utilisées pour créer ces mises en page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!