Propriété CSS columns
La propriété CSS columns est un raccourci pour les propriétés suivantes :
column-count, qui définit le nombre maximum de colonnes.column-width, qui définit la largeur minimale des colonnes.
Ces deux propriétés créent ensemble une mise en page multi-colonnes qui s'adapte à la largeur du conteneur, réduisant généralement le nombre de colonnes à mesure que l'espace diminue.
La propriété columns fait partie des propriétés CSS3.
Définir à la fois column-count et column-width n'a pas toujours de sens, car cela peut restreindre la flexibilité et la réactivité de la mise en page.
INFO
Si la largeur et le nombre de colonnes ne tiennent pas dans la largeur de l'élément, le navigateur réduira automatiquement le nombre de colonnes pour respecter les largeurs spécifiées.
| Valeur initiale | auto auto |
|---|---|
| S'applique à | Conteneurs de blocs, à l'exception des boîtes enveloppes de tableau. |
| Héritée | Non. |
| Animable | Oui. Seule column-width est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columns = "100px 2"; |
Syntaxe
Syntaxe de la propriété CSS columns
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Exemple de la propriété columns :
Exemple de la propriété CSS columns avec les propriétés column-width et column-count
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 100px 3;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Dans l'exemple suivant, la largeur minimale pour chaque colonne est définie à 50px, et le nombre maximum de colonnes à 5 :
Exemple de la propriété columns avec une largeur et un nombre de colonnes spécifiés :
Exemple de la propriété CSS columns avec les propriétés column-width et column-count comme valeur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 50px 5;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
auto | column-width et column-count sont tous deux définis sur auto. C'est la valeur par défaut. |
<longueur> | Définit la largeur minimale des colonnes. |
<entier> | Définit le nombre maximum de colonnes. |
initial | Définit la propriété sur sa valeur par défaut. |
inherit | Hérite la propriété de son élément parent. |
Pratique
Quelles sont les propriétés utilisées pour créer des mises en page multi-colonnes en CSS ?