Les propriétés CSS column, liées aux colonnes, permettent de diviser le contenu d’un élément en plusieurs colonnes, offrant une présentation similaire à celle des journaux ou des magazines. Dans ce tutoriel, nous allons découvrir cinq propriétés CSS : column-count, column-gap, column-width, column-rule, column-span, et columns, avec des exemples concrets pour illustrer leur utilisation.
Les propriétés columns
- columns: 1;
- columns: 3 auto;
- column-count: 2;
- columns: 2; column-rule: solid 6px #ffcc00; column-gap: 60px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
La propriété CSS columns ainsi que les autres propriétés liées aux colonnes column-count, column-width, column-rule, column-span s’appliquent à tout élément bloc. Cela inclut non seulement les éléments <p>, mais aussi d’autres éléments de type bloc tels que <div>, <section>, <article>, et même des listes comme <ul> ou <ol>.
Définir le nombre de colonnes avec column-count
La propriété column-count indique au navigateur combien de colonnes doit comporter l’élément ciblé. Sa valeur doit être un nombre entier positif. Par exemple, pour créer trois colonnes :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>p {
column-count: 3;
}La propriété column-count permet donc de spécifier le nombre de colonnes dans lesquelles le contenu doit être réparti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Définir l’espacement avec column-gap
La propriété column-gap indique au navigateur l’espacement entre les colonnes. Il s’agit de la goutière, de l’espace entre chaque colonne.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>p {
column-count: 3;
column-gap: 50px;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Définir la taille des colonnes avec column-width
La propriété column-width définit la largeur idéale pour chaque colonne. Le navigateur ajustera le nombre de colonnes pour s’adapter à cette largeur. Exemple :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>p {
column-width: 150px;
column-gap: 30px;
}La propriété column-width définit la largeur idéale pour chaque colonne. La valeur peut être spécifiée dans différentes unités : en pixels px, en pourcentage % ou en unités relatives em, rem. Si la largeur totale de l’élément est insuffisante pour accueillir le nombre de colonnes défini par column-count, les colonnes déborderont sur plusieurs lignes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
La valeur auto pour column-width permet aux colonnes de s’adapter uniformément à la largeur disponible de l’élément conteneur. Les colonnes se répartiront équitablement l’espace disponible, sans déborder sur plusieurs lignes.
Séparation des colonnes avec column-rule
La propriété column-rule permet de définir une règle visuelle – une ligne – entre les colonnes. C’est une propriété raccourcie pour column-rule-width, column-rule-style, et column-rule-color. Exemple :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>p {
column-count: 3;
column-gap: 20px;
column-rule: 2px solid #ffcc00; /* En jaune */
}La propriété column-rule permet de personnaliser l’apparence des séparations entre les colonnes. Vous pouvez définir la couleur, l’épaisseur et le style du trait de séparation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Étendre un élément sur plusieurs colonnes avec column-span
La propriété column-span permet à un élément de s’étendre sur plusieurs colonnes. Il peut prendre deux valeurs : none (valeur par défaut) et all. Exemple :
<div class="exemple-column-span">
<div class="span-all">Cet élément s'étend sur toutes les colonnes.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.</p>
</div>.exemple-column-span {
column-count: 3;
column-gap: 20px;
}
.span-all {
column-span: all;
background-color: #ccc;
padding: 10px;
margin-bottom: 20px;
}La propriété column-span permet d’étendre une colonne sur plusieurs colonnes adjacentes. Cela peut être utile pour créer des titres ou des images qui s’étendent sur toute la largeur de la page, ou pour organiser le contenu de manière plus complexe.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.
La propriété CSS raccourcie columns
La propriété columns est une propriété raccourcie permettant de définir simultanément column-width et column-count. Exemple :
<div class="exemple-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.</p>
<p>Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce ac turpis quis ligula lacinia aliquet.</p>
</div>.exemple-column {
column: 150px 3;
column-gap: 20px;
column-rule: 2px solid #000;
}Dans l’exemple ci-dessus, la propriété columns définit une largeur de colonne de 150 pixels et un nombre de colonnes de 3, avec une ligne de séparation solide de 2 pixels et une espace de 20 pixels entre les colonnes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.
Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce ac turpis quis ligula lacinia aliquet.
Les propriétés CSS columns et celles liées aux colonnes permettent de créer des mises en page sophistiquées et lisibles en répartissant le contenu sur plusieurs colonnes. column-count, column-width, column-rule, column-span, et la propriété raccourcie columns offrent une grande flexibilité et facilitent la gestion du contenu multi-colonnes dans vos pages web. Utilisez ces propriétés pour améliorer l’esthétique et l’ergonomie de vos designs web.
