CSS : disposition en maçonnerie

Qu'est-ce que la disposition en maçonnerie ?

de MDN :

La disposition en maçonnerie est une méthode de disposition dans laquelle un axe utilise une disposition en grille stricte typique, le plus souvent des colonnes, et l'autre une disposition en maçonnerie. Sur l'axe de la maçonnerie, plutôt que de s'en tenir à une grille stricte avec des vides laissés après les éléments les plus courts, les éléments de la rangée suivante remontent pour combler complètement les vides.

La mise en page de pinterest.com en est un exemple classique :

Que pouvons-nous utiliser à partir de notre boîte à outils CSS ?

grille

Nous utilisons un simple balisage HTML :

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

La réactivité est excellente, mais nous avons des trous sous chaque image.

nombre de colonnes

Ensuite, utilisez la propriété de conteneur CSS column-count.

La propriété CSS column-count divise le contenu d'un élément en le nombre spécifié de colonnes.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

Pas bien.
La mise en page actuelle ressemble à ce que vous souhaitez, mais les images sont mises à l'échelle et ne sont pas réactives. Bien que nous puissions utiliser des requêtes multimédias pour contrôler la réactivité, nous visons une solution plus robuste.

Utiliser des colonnes

La propriété CSS raccourcie columns définit le nombre de colonnes à utiliser lors du dessin du contenu d'un élément, ainsi que la largeur de ces colonnes.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

Une seule ligne de code. Incroyable !

Comment cela marche-t-il?

Chaque colonne a une largeur minimale de 250 px. S'il y a un espace supplémentaire au-delà de 250 px, les colonnes s'agrandiront pour remplir l'espace. Si l'espace est réduit, le nombre de colonnes diminuera en conséquence.

Suppléments

Nous pouvons limiter le nombre de colonnes en définissant la mise en page à un maximum de X colonnes :

.photos {
  columns: 250px 2;
  ...
  ...
}

Utiliser

colonnes
ne se limite pas aux seules dispositions d’images de maçonnerie. Nous pouvons également l'utiliser pour styliser les colonnes de texte : même CSS, contenu différent.

Réflexions finales

Est-ce que cela a été utile ?
Quel a été votre cas d’utilisation ?

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!