La mise en page multi-colonnes en CSS est un moyen de diviser le contenu d’un élément en plusieurs colonnes, tout comme dans un journal ou un magazine. Voici comment vous pouvez réaliser cela:
L’une des propriétés les plus utilisées pour créer des mises en page multi-colonnes est la propriété “column-count”. Celle-ci permet de spécifier le nombre de colonnes que vous souhaitez pour votre contenu.
HTML :
```
Votre contenu ici…
CSS :
```
.multicolonne {
column-count: 3;
}
```
Dans cet exemple, le contenu de l’élément avec la classe “multicolonne” sera divisé en trois colonnes.
CSS offre également d’autres propriétés pour contrôler l’apparence des colonnes :
- `column-gap`: définit l’espace entre les colonnes.
- `column-rule`: définit une ligne entre les colonnes.
Exemple :
```
.multicolonne {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid black;
}
```
Dans cet exemple, il y aura un espace de 20px entre chaque colonne et une ligne noire de 1px.
Notes:
1. La compatibilité du navigateur pour les colonnes CSS est assez bonne, mais pour une compatibilité maximale, vous pouvez utiliser des préfixes de fournisseurs, comme `-webkit-column-count`, `-moz-column-count`, etc.
2. Le contenu est automatiquement réparti entre les colonnes dans l’ordre dans lequel il se produit dans le document. Si vous voulez contrôler l’ordre des colonnes et d’autres aspects de la mise en page des colonnes, vous devrez utiliser un grid ou flex layout.
