CSS - mise en page à plusieurs colonnes

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans l'univers passionnant des mises en page à plusieurs colonnes avec CSS. En tant que votre enseignant de quartier bienveillant, je suis là pour vous guider à travers ce voyage avec un tas d'exemples et d'explications. Alors, c'est parti !

Introduction aux mises en page à plusieurs colonnes

Imaginez que vous lisez un journal. Notez comment le texte est organisé en colonnes nettes ? C'est exactement ce que nous allons réaliser avec CSS, mais sur des pages web ! Les mises en page à plusieurs colonnes nous permettent de créer des structures de contenu visuellement attractives et faciles à lire.

Mise en page à plusieurs colonnes CSS - mise en page en trois colonnes

Commençons par une mise en page de base en trois colonnes. C'est parfait pour créer du contenu au style de magazine ou organiser des informations sur une page web.

<div class="three-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

Dans cet exemple, nous utilisons la propriété column-count pour spécifier que nous voulons trois colonnes. La propriété column-gap définit l'espace entre chaque colonne.

Mise en page à plusieurs colonnes CSS - Définir la largeur des colonnes

Parfois, au lieu de spécifier le nombre de colonnes, vous pourriez vouloir définir une largeur spécifique pour chaque colonne. Voyons comment cela fonctionne :

<div class="flexible-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.flexible-columns {
column-width: 200px;
}

Ici, nous utilisons column-width pour définir chaque colonne à 200 pixels de large. Le navigateur créera autant de colonnes qu'il peut contenir tout en maintenant cette largeur.

Mise en page à plusieurs colonnes CSS - Styling des colonnes

Maintenant, ajoutons un peu de style à nos colonnes. Nous pouvons ajouter des bordures, changer les couleurs de fond, et plus encore !

<div class="styled-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

Dans cet exemple, nous utilisons column-rule comme propriété abrégée pour ajouter une ligne pointillée entre les colonnes. Nous pouvons également définir ces propriétés individuellement en utilisant column-rule-style, column-rule-width, et column-rule-color.

Mise en page à plusieurs colonnes CSS - Étendre les colonnes

Parfois, vous pourriez vouloir que un contenu s'étende sur plusieurs colonnes. Voyons comment nous pouvons réaliser cela :

<div class="spanning-columns">
<h2>Cet en-tête s'étend sur toutes les colonnes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">Ce paragraphe s'étend sur deux colonnes. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

Ici, nous utilisons column-span: all pour faire en sorte que l'en-tête s'étende sur toutes les colonnes, et column-span: 2 pour faire en sorte qu'un paragraphe s'étende sur deux colonnes.

Mise en page à plusieurs colonnes CSS - Fragmentation des colonnes

La fragmentation fait référence à la manière dont le contenu est divisé sur les colonnes. regardons comment nous pouvons contrôler cela :

<div class="fragmented-columns">
<h3>Chapitre 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Chapitre 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

Dans cet exemple, nous utilisons break-after: column pour nous assurer que chaque en-tête de chapitre commence en haut d'une nouvelle colonne.

Propriétés connexes

Résumons toutes les propriétés que nous avons apprises dans un tableau pratique :

Propriété	Description
column-count	Spécifie le nombre de colonnes
column-width	Définit la largeur de chaque colonne
column-gap	Définit l'espace entre les colonnes
column-rule	Abbrégé pour définir une ligne entre les colonnes
column-rule-style	Définit le style de la règle de colonne
column-rule-width	Définit la largeur de la règle de colonne
column-rule-color	Définit la couleur de la règle de colonne
column-span	Permet à un élément de s'étendre sur plusieurs colonnes
break-after	Contrôle les sauts de colonne après un élément

Et voilà, amis ! Nous avons fait le tour du pays des mises en page à plusieurs colonnes avec CSS. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces propriétés. Qui sait ? Vous pourriez créer le prochain grand site de style magazine !

Comme mon ancien professeur aimait dire, "CSS est comme la cuisine. Vous pourriez faire un peu de désordre au début, mais avec la pratique, vous serez bientôt à créer des œuvres d'art en un rien de temps !" Alors continuez à coder, continuez à apprendre, et surtout, amusez-vous bien !

Credits: Image by storyset