Le multicolonnage c'est la répartition automatique du contenu d'une page ou d'un bloc dans plusieurs colonnes. Ce type de mise en page qui est la base de tous les journaux, revues et magazines, a été pris en charge par les CSS seulement à partir de la version 3 qui introduit des propriétés pour gérer le nombre de colonnes, leur largeur et l'espace qui les sépare (la gouttière).
Le positionnement multicolonne s'applique aux éléments de type bloc,
cellules de tableau ou bloc en-ligne.
Un élément multicolonne est défini par le W3C comme un élément dont
la propriété column-count
ou column-width
n'a pas la valeur auto. Cet élément agit alors comme le
conteneur de la disposition multicolonne.
Si on peut théoriquement spécifier column-count et column-width en même temps, l'algorithme utilisé pour calculer le nombre de colonnes utilisera seulement l'une ou l'autre des propriétés suivant les cas.
position:
fixed) ou absolu (position: absolute).
column-count
définit le nombre de colonnes que contient l'élément. La largeur
des colonnes est automatiquement calculée par le navigateur.
Dans le cas ou la largeur de l'élément varie (suite à un
redimensionnement de fenêtre par exemple), la largeur des colonnes
est automatiquement agrandie ou rétrécie.
Quand on redimensionne la fenêtre d'exemple, on voit que la largeur des 3 colonnes augmente automatiquement pour remplir tout l'espace du conteneur (ici le corps de la page).
column-width
définit la largeur souhaitée des colonnes. La
largeur peut être spécifiée avec toutes les unités CSS, mais ne peut pas être
un pourcentage. Le navigateur va afficher dans le conteneur le plus
de colonnes possible avec la largeur souhaitée. Pour remplir
complétement le conteneur, la largeur pourra être plus ou moins
adaptée par le navigateur.
Dans le cas ou la largeur de l'élément varie (suite à un
redimensionnement de fenêtre par exemple), le nombre de colonnes
dans le conteneur est automatiquement augmenté ou diminué.
Quand on redimensionne la fenêtre d'exemple, on voit que le nombre de colonnes augmente (ou diminue) automatiquement pour remplir tout l'espace du conteneur (ici le corps de la page). La largeur des colonnes ne change pas.
L'espace qui sépare 2 colonnes (la gouttière) est définit avec la propriété column-gap. La largeur de cet espace peut être spécifiée avec toutes les unités CSS, mais ne peut pas être un pourcentage. Toutes les gouttières dans un élément multicolonne auront la même largeur (pas d'individualisation possible).
La grouttière peut être agrémentée d'un trait de séparation (ou liseré) qui est définit par 3 propriétés :
Ces trois propriétés acceptent les même valeurs que celles possible pour définir la bordure des boîtes.
La propriété column-rule est un raccourci pour les 3 propriétés et donc à privilégier.
Si dans les colonnes des éléments comme des images sont trop larges,
ils peuvent dépasser dans la colonne adjacente (à ce jour, cela dépend
encore du navigateur).
Dans l'exemple suivant, l'image dans la 2ème colonne pourra ainsi
déborder sur la 3ème colonne (Gecko) ou être tronquée (Webkit).
La propriété column-span permet de définir un élément qui s'étendra sur l'ensemble des colonnes de l'élément multicolonne.
N'importe quel élément de type bloc du conteneur multicolonne peut
être étendu sur l'ensemble des colonnes.
A remarquer que l'on ne peut pas étendre un élément sur seulement
quelques colonnes : c'est toutes les colonnes (all) ou
aucune (none par defaut).
Le contenu des colonnes peut être équilibré avec la propriété column-fill.
Par défaut, les colonnes seront remplies de façon séquentielle et
auront différentes longueurs, mais la valeur balance
permet de minimiser dans la mesure du possible les variations de
longueur des colonnes.
L'exemple suivant montre 2 sections avec du contenu identique. La 2eme section est "équilibrée", mais aucune différence avec la 1ére section n'est notable.
Trois propriétés permettent de définir comment sont faits les changements de colonnes des éléments d'un conteneur multicolonne :
Parmi les valeurs possibles de ces 3 propriétés, celles à utiliser dans les conteneurs multicolonnes sont :
column pour toutjours forcer un saut de
colonne,avoid-column pour éviter un saut de colonne.
Dans l'exemple suivant, un saut de colonne est forcé après le 1er
paragraphe et un autre avant le dernier paragraphe. Remarquez que
pour répondre à ces demandes une quatrième colonne est ajoutée par
le navigateur.
Sauf cas exceptionnel, nous vous conseillons de ne pas forcer les
saut de colonnes et de laisser le navigateur les gérer de façon
naturelle.