Attribut COLUMNS

Rôle

L’attribut columns permet de disposer le contenu d’un bloc en plusieurs colonnes

Cet attribut est un raccourci de column-count qui spécifie un nombre de colonnes et de column-widthqui spécifie la largeur des colonnes

 Note : La largeur des colonnes ne sera jamais en dessous de la valeur column-width même si vous réduisez la taille de la fenêtre

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.columns

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p {
    -webkit-columns: 100px 3;
    -moz-columns: 100px 3;
    columns: 100px 3;
}

– Le code HTML

<h1>titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod beatae magni unde consequatur ipsa deserunt vero deleniti voluptates accusantium, non laboriosam, earum, animi ab expedita impedit obcaecati molestiae nihil soluta Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident explicabo cupiditate perspiciatis nemo, laudantium repudiandae quo qui voluptatibus doloremque voluptates tempora, assumenda unde, alias cumque esse asperiores. Repellendus quidem, inventore..</p>

Résultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

A partir de IE-10. Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit- (Chrome, Safari, Android…), -moz- (Mozilla).

Valeurs

Les différentes valeurs de l’attribut columns sont:

auto
La largeur et le nombre de colonne sont calculés automatiquement. Valeur par défaut
Syntaxe :
columns : auto
largeur de colonne
Voir l’attribut column-widthIl s’agit de la valeur minimum de la largeur d’une colonne. Vous ne pouvez donc pas réduire la taille de chaque colonne (en augmentant le nombre de colonnes) en dessous de cette valeur
nombre de colonnes
Voir l’attribut column-countIl s’agit du nombre maximum de colonnes à afficher. Ce nombre peut diminuer si vous réduisez la taille de la fenêtre ou si vous augmentez la valeur de l’attibut column-width
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
columns : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
columns : inherit

A voir aussi

display– clear– z-index– flex– align-content– align-items– align-self– vertical-align