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é