Propriété CSS column-count

La propriété column-count spécifie le nombre de colonnes dans lesquelles le contenu d'un élément sera divisé.

La propriété column-count est l'une des propriétés CSS3.

Elle accepte une valeur numérique ou le mot-clé auto. auto est la valeur par défaut. Lorsqu'elle est définie sur auto, le nombre de colonnes est déterminé par d'autres propriétés telles que column-width. Une valeur numérique spécifie le nombre exact de colonnes dans lesquelles le contenu de l'élément doit être réparti.

Valeur initiale	auto
S'applique à	Conteneurs de blocs, à l'exception des boîtes enveloppes de tableau.
Héritée	Non.
Animable	Oui. Le nombre de colonnes est animable.
Version	CSS3
Syntaxe DOM	object.style.columnCount = "4";

Syntaxe

Syntaxe de la propriété column-count

css

column-count: <integer> | auto | initial | inherit;

Exemple de la propriété column-count :

Exemple de la propriété CSS column-count avec la valeur auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: auto;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      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>

Try it Yourself »

Résultat

CSS column-count Property

Exemple de la propriété column-count avec une valeur numérique :

Exemple de la propriété CSS column-count avec une valeur numérique

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      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. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
auto	Le nombre de colonnes est déterminé par d'autres propriétés. Il s'agit de la valeur par défaut de cette propriété.	Tester »
`<integer>`	Spécifie le nombre exact de colonnes dans lesquelles le contenu doit être réparti.	Tester »
initial	Définit la propriété sur sa valeur par défaut.	Tester »
inherit	Hérite de la propriété de son élément parent.

Practice

Quelle est la fonction de la propriété CSS 'column-count' ?

Elle définit le nombre de colonnes dans une mise en page multi-colonnes.Elle définit l'espacement entre les colonnes dans la mise en page.Elle définit la couleur des colonnes dans la mise en page.Elle définit la largeur des colonnes dans la mise en page.Elle contrôle la façon dont le contenu déborde de son conteneur.

Propriété CSS column-count ​

Syntaxe ​

Exemple de la propriété column-count : ​

Résultat ​

Exemple de la propriété column-count avec une valeur numérique : ​

Valeurs ​