Layout Masonry

Utilisez CSS « colonne-compte » et « break-inside : éviter » pour créer de belles mises en page de grille amorphe (mises en page de maçonnerie) comme Pinterest. Il peut être implémenté en utilisant uniquement CSS sans utiliser JavaScript.

Fonctionnalités

• Implémenté en utilisant uniquement CSS : Excellentes performances sans besoin de calculs JavaScript.
• Support réactif : Le nombre de colonnes change automatiquement en fonction de la largeur de l’écran (3 colonnes → 2 colonnes → 1 colonne).
• Prévention de la casse des éléments : break-inside : évitez empêche le contenu d’être brisé de manière anormale entre les colonnes.

Comment utiliser

Appliquez simplement la classe au conteneur parent HTML et organisez les éléments enfants pour créer une belle mise en page de maçonnerie.

<div class="masonry-layout">
  <div class="masonry-item">
    <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&auto=format&fit=crop&q=60" alt="Nature" />
    <div class="item-content">
      <h3>Forest Serenity</h3>
      <p>A beautiful walk through the foggy woods.</p>
    </div>
  </div>
  <div class="masonry-item">
    <img src="https://images.unsplash.com/photo-1449844908441-8829872d2607?w=800&auto=format&fit=crop&q=60" alt="City" />
    <div class="item-content">
      <h3>Urban Exploration</h3>
      <p>Discovering hidden alleys.</p>
    </div>
  </div>
  <div class="masonry-item">
    <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=600&h=800&auto=format&fit=crop&q=60" alt="Mountains" />
    <div class="item-content">
      <h3>Mountain Peaks</h3>
      <p>Snowy tops against a clear blue sky.</p>
    </div>
  </div>
  <div class="masonry-item">
    <img src="https://images.unsplash.com/photo-1439405326854-014607f694d7?w=800&h=500&auto=format&fit=crop&q=60" alt="Ocean" />
    <div class="item-content">
      <h3>Ocean Waves</h3>
      <p>Crashing waves on the rocky shore.</p>
    </div>
  </div>
  <div class="masonry-item">
    <img src="https://images.unsplash.com/photo-1473580044384-7ba9967e16a0?w=800&auto=format&fit=crop&q=60" alt="Desert" />
    <div class="item-content">
      <h3>Desert Dunes</h3>
      <p>Endless sand under the scorching sun.</p>
    </div>
  </div>
  <div class="masonry-item">
    <img src="https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=600&h=700&auto=format&fit=crop&q=60" alt="Bridge" />
    <div class="item-content">
      <h3>Suspension Bridge</h3>
      <p>Connecting two sides of the canyon.</p>
    </div>
  </div>
</div>

.masonry-layout {
  /* Spécifiez le nombre de colonnes */
  column-count: 3;
  /* Spécifie l'espace entre les colonnes */
  column-gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.masonry-item {
  /* Empêcher la répartition des éléments entre les colonnes */
  break-inside: avoid;
  /* Repli pour les anciens navigateurs */
  page-break-inside: avoid;
  
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin: 0 !important;
}

.item-content {
  padding: 1.25rem;
}

.item-content h3 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 1.25rem;
  color: #333;
}

.item-content p {
  margin: 0 !important;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive design */
@media (max-width: 900px) {
  .masonry-layout {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .masonry-layout {
    column-count: 1;
  }
}