Comment créer des colonnes avec column-count en CSS ?
Valentin Garcia est l'auteur de l’article How to Create Columns with column-count in CSS dont la traduction est autorisée par ostraining.com.
Dans un tutoriel précédent, nous avons expliqué qu'il peut être dangereux d'utiliser des largeurs (width) en HTML pour définir la mise en page.
Heureusement, le CSS est suffisamment puissant pour imiter des balises HTML désuètes. Par exemple, vous pouvez créer des colonnes en CSS en utilisant la propriété column-count. Ce peut être très utile pour les mises en page d'un site, mais aussi pour diviser des longs textes en colonnes.
Dans ce tutoriel nous allons voir comment créer des colonnes avec column-count.
Etape 1 Le HTML
Créer une mise en page HTML avec le code ci-dessous. Remplacer "Votre texte va ici" avec votre propre texte. Cela peur se faire dans un node Drupal, un poste WordPress ou un article Joomla ou simplement ou vous en avez besoin.
<div class="content">
Votre texte va ici
</div>
Notez que j'utilise la class "content" pour le div. Nous l'utiliserons pour créer le selecteur CSS dans l'étape suivante.
Etape 2 le CSS
Dans votre fichier CSS, ajouter le code suivant. Ce code divisera le texte en 2 colonnes :
.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
Les préfixes dans le CSS ci-dessus sont prévus pour la compatibilité avec des navigateurs spécifiques :
- -webkit- pour Chrome, Safari and Opera
- -moz- pour Firefox
Etape 3 l'espace entre les colonnes
Vous pouvez définir un espace entre les colonnes en ajoutant la propriété "column-gap"
.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 60px;
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
}
Changer le 60px selon vos besoins
Etape 4 le résultat finale
Voila comment votre texte apparaîtra :
Cliquez ce lien pour visualiser un exemple
Les Navigateurs compatibles
Voir quels navigateurs permettent l'utilisation de cette propriété