columns
=======

La propriété **`columns`** est une propriété raccourcie permettant de définir les deux propriétés `column-width` (qui définit la largeur des colonnes) et `column-count` (qui définit le nombre de colonnes) en même temps.

Exemple interactif
------------------

Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).

Syntaxe
-------


```css
/\* Largeur \*/
columns: 18em;

/\* Nombre de colonnes \*/
columns: 1;
columns: auto;

/\* Combinaison d'une largeur et d'un nombre \*/
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/\* Valeurs globales \*/
columns: inherit;
columns: initial;
columns: unset;
```


La propriété `columns` se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.

### Valeurs

`<'column-width'>`

Une valeur de longueur (type `<length>`) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.

`<'column-count'>`

Une quantité (type `<integer>`) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de `column-width` n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `column-width`: `auto`
* `column-count`: `auto`
 |
| Applicabilité | Block containers except table wrapper boxes |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `column-width`: la valeur absolue valant zéro ou plus
* `column-count`: comme spécifié
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `column-width`: une longueur
* `column-count`: un entier
 |

Syntaxe formelle
----------------
```

columns =   
  <'column-width'>  ||  
  <'column-count'>    
  
```

Exemples
--------

### CSS


```css
.exemple {
  margin: 0;
  height: 90px;
  border: 3px solid black;
  columns: 3;
}
```

### HTML


```html
<p class="exemple">
  « Mais alors, » pensa Alice, « ne serai-je donc jamais plus vieille que je ne
  le suis maintenant ? D’un côté cela aura ses avantages, ne jamais être une
  vieille femme. Mais alors avoir toujours des leçons à apprendre ! Oh, je
  n’aimerais pas cela du tout. » « Oh ! Alice, petite folle, » se répondit-elle.
  « Comment pourriez-vous apprendre des leçons ici ? Il y a à peine de la place
  pour vous, et il n’y en a pas du tout pour vos livres de leçons. »
</p>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # columns |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.