Dispositions à deux et trois colonnes

Pour structurer des mises en page multi-colonnes, plusieurs stratégies techniques sont couramment employées :

• Flexbox : L'approche la plus moderne et flexible.
• Floats : La méthode classique nécessitant la gestion des flux (clearfix).
• Positionnement absolu : Utile pour des sections spécifiques, bien que moins malléable pour le contenu fluide.

Implémentation de la mise en page "Holy Grail" (圣杯布局)

Cette technique permet de placer le contenu principal au centre tout en gardant une priorité SEO dans le code HTML. La structure utilise des marges négatives et un positionnement relatif.

<div class="wrapper">
 <div class="main-content">Centre</div>
 <div class="sidebar-left">Gauche</div>
 <div class="sidebar-right">Droite</div>
</div>

.wrapper { padding: 0 100px 0 200px; }
.main-content { float: left; width: 100%; }
.sidebar-left { float: left; width: 200px; margin-left: -100%; position: relative; left: -200px; }
.sidebar-right { float: left; width: 100px; margin-left: -100px; position: relative; right: -100px; }

Technique "Double Wing" (双飞翼布局)

Similaire au concept précédent, mais elle délègue le contrôle de l'espace à un conteneur interne pour le bloc central, évitant ainsi l'usage de positions relatives complexes.

<div class="container">
 <div class="main-body"><div class="content">Contenu</div></div>
 <div class="side-nav">Nav</div>
 <div class="side-extra">Extra</div>
</div>

.main-body { float: left; width: 100%; }
.content { margin: 0 100px 0 200px; }
.side-nav { float: left; width: 200px; margin-left: -100%; }
.side-extra { float: left; width: 100px; margin-left: -100px; }

Disposition en Maçonnerie (Waterfall Layout)

Pour obtenir un alignement automatique d'éléments de hauteurs variables, voici les deux méthodes principales :

1. Utilisation de CSS Multi-colonnnes

Idéal pour des listes de contenu simple, bien que l'ordre de lecture soit vertical plutôt qu'horizontal.

.masonry-grid {
 column-count: 3;
 column-gap: 1.5rem;
}
.grid-item {
 break-inside: avoid;
 margin-bottom: 1rem;
}

2. Calcul dynamique via JavaScript

Pour un contrôle total sur l'ordre des éléments et le placement exact, le positionnement absolu piloté par JS reste la référence industrielle. Le principe consiste à calculer la position top et left de chaque bloc en fonction de la hauteur cumulée de la colonne la plus courte au moment de l'insertion.