column-count: Définir le nombre de colonnes
column-fill Comment remplir les colonnes
column-gapL'espace entre les colonnes
Voir l'exemple en bas de la page
Définition et utilisation da la propriété css column-count
La propriété column-count spécifie le nombre de colonnes que doit comporter un élément.La propriété column-count de CSS est utilisée pour diviser une partie du contenu d'un élément HTML en un nombre donné de colonnes.
La Syntaxe CSS
column-count: number|auto|initial|inherit;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnCount = "3" |
Prise en charge de la propriété css column-count dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 50 4 -webkit- | 10 | 52 2 -moz- | 9 3.1 -webkit- | 37 15 -webkit- |
Valeurs de la propriété column-count
number Le nombre optimal de colonnes dans lesquelles le contenu de l'élément sera réparti.auto Valeur par défaut. Le nombre de colonnes sera déterminé par d'autres propriétés, comme par exemple "column-width".
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.
Définition et utilisation da la propriété css column-fill
La propriété column-fill indique comment remplir les colonnes, de manière équilibrée ou non.Astuce : si vous ajoutez une hauteur à un élément à plusieurs colonnes, vous pouvez contrôler la façon dont le contenu remplit les colonnes. Le contenu peut être équilibré ou rempli de manière aléatoire.
La Syntaxe CSScolumn-fill: balance|auto|initial|inherit;
| Valeurs par défaut | balance |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnFill="auto" |
Prise en charge de la propriété css column-fill dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- et -moz- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur | | | | | |
|---|---|---|---|---|---|
| Verssion | 50 | 10 | 52 13 -moz- | 10 7 -webkit- | 37 |
Valeurs de la propriété column-fill
balance Valeur par défaut. Remplit chaque colonne avec à peu près la même quantité de contenu, mais ne permet pas aux colonnes d'être plus hautes que la hauteur définit pour l'élément (ainsi, les colonnes peuvent être plus courtes que la hauteur car le navigateur distribue le contenu uniformément à l'horizontale).auto Remplit chaque colonne jusqu'à ce qu'elle atteigne la hauteur, et ce jusqu'à ce qu'il n'y ait plus de contenu (cette valeur ne remplit donc pas nécessairement toutes les colonnes ni de manière uniforme).
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.
Définition et utilisation da la propriété column-gap css column-gap
La propriété column-gap spécifie l'écart (l'espace) entre les colonnes.Remarque : si une règle de colonne column-rule est présente entre les colonnes, elle apparaîtra au milieu de l'espace.
column-gap: length|normal|initial|inherit;
| Valeurs par défaut | normal |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnGap="50px" |
Prise en charge de la propriété css column-gap dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur | | | | | |
|---|---|---|---|---|---|
| column-gap (dans Multiple colonnes) | 50 | 10 | 52 | 10 | 37 |
| column-gap (dans Grid) | 66 | 16 | 61 | 12 | 53 |
| column-gap (dans Flexbox) | 84 | 84 | 63 | 14.1 | 70 |
Valeurs de la propriété column-gap
length Une longueur spécifiée qui définira l'écart entre les colonnes.normal Valeur par défaut. Spécifie un espace normal entre les colonnes. Le W3C suggère une valeur de 1em
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.
Exemple montrant les propriétés css column-count, column-fill et column-gap
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS les propriétés column-count, column-fill et column-gap</title>
<style>
body {
background-color:#E7E9EB;
}
#monDIV {
height:150px;
background-color:#FFFFFF;
column-count:3;
column-fill: auto;
column-gap: 50px;
}
</style>
</head>
<body>
<h1>CSS les propriétés column-count, column-fill et column-gap</h1>
<div id="monDIV">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mattis vulputate enim nulla aliquet porttitor lacus. Eleifend mi in nulla posuere sollicitudin. Varius quam quisque id diam vel quam elementum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Neque laoreet suspendisse interdum consectetur libero. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ipsum a arcu cursus vitae congue mauris. Egestas sed tempus urna et pharetra pharetra massa massa. Nibh tellus molestie nunc non blandit massa. Sit amet nisl purus in mollis nunc. Ac turpis egestas maecenas pharetra.
</div>
</body>
</html>
CSS changer les propriétés column-count, column-fill et column-gap avec JavaScript
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS changer les propriétés column-count, column-fill et column-gap avec JavaScript</title>
<style>
button{font-weight:900;color:blue}
#monDIV {
height:150px;
background-color:#FFFFFF;
column-count:3;
column-fill: auto;
column-gap: 50px;
}
</style>
</head>
<body>
<h1>CSS les propriétés column-count, column-fill et column-gap</h1>
<button onclick="change_nbr_colonne()">Changer le nombre de colonnes</button> <button onclick="change_fill()">Changer column-fill</button> <button onclick="change_gap()">Changer column-gap</button> <button onclick="reset()"> Reinitialiser </button><br><br>
<div id="monDIV">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mattis vulputate enim nulla aliquet porttitor lacus. Eleifend mi in nulla posuere sollicitudin. Varius quam quisque id diam vel quam elementum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Neque laoreet suspendisse interdum consectetur libero. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ipsum a arcu cursus vitae congue mauris. Egestas sed tempus urna et pharetra pharetra massa massa. Nibh tellus molestie nunc non blandit massa. Sit amet nisl purus in mollis nunc. Ac turpis egestas maecenas pharetra.
</div>
<script>
function change_nbr_colonne() {
document.getElementById("monDIV").style.columnCount = "4";
}
function change_fill() {
document.getElementById("monDIV").style.columnFill = "balance";
}
function change_gap() {
document.getElementById("monDIV").style.columnGap="20px";
}
function reset() {
location.href=""
}
</script>
</body>
</html>