Avec seulement quelques règles CSS, vous pouvez créer une mise en page inspirée de l'impression qui a la flexibilité du Web. C'est comme prendre un journal, mais à mesure que le papier devient plus petit, les colonnes s'ajusteront et s'équilibreront automatiquement, permettant au contenu de s'écouler naturellement.
.intro ( columns: 300px 2; )La columnspropriété acceptera column-count, column-widthou les deux propriétés.
columns: || ;L'utilisation des deux column-countet column-widthest recommandée pour créer une mise en page flexible à plusieurs colonnes. Le column-countfera office de nombre maximal de colonnes, tandis que le column-widthdictera la largeur minimale de chaque colonne. En rassemblant ces propriétés, la mise en page multi-colonnes se décompose automatiquement en une seule colonne à des largeurs de navigateur étroites sans nécessiter de requêtes multimédias ou d'autres règles.
Une mise en page à plusieurs colonnes fonctionne très bien sur les éléments de bloc, y compris les listes, pour une navigation flexible.
Pour affiner davantage votre mise en page multi-colonnes, utilisez break-insidedes éléments spécifiques pour les empêcher de rester coincés entre les colonnes.
Plus d'information
- Module de mise en page multi-colonnes CSS niveau 1 (version de travail)
- Documentation MDN
Prise en charge du navigateur
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| 10+ | Tout | 9+ | 50+ | Tout | 11,5+ |
| Chrome Android | Android Firefox | Navigateur Android | Safari sur iOS | Opera Mobile |
|---|---|---|---|---|
| Tout | Tout | Tout | Tout | Tout |