column-height
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS column-height définit la hauteur des colonnes dans une mise en page multi-colonnes CSS.
La propriété abrégée columns peut être utilisée pour définir les valeurs des propriétés column-height, column-count et column-width dans une seule déclaration.
Syntaxe
/* Valeurs avec un mot-clé */
column-height: auto;
/* Valeurs de type <length> */
column-height: 300px;
column-height: 25em;
column-height: 70vh;
/* Valeurs globales */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;
Valeurs
auto-
La valeur initiale. Si le conteneur de contenu a une hauteur définie, les colonnes de contenu s'étendront jusqu'à cette hauteur, débordant sur le côté si le contenu ne tient pas à l'intérieur du conteneur. Si le conteneur de contenu n'a pas de hauteur définie, le contenu sera réparti également entre les colonnes générées à l'intérieur du conteneur.
<length>-
La hauteur des colonnes. Doit être non négative.
Description
La propriété column-height définit la hauteur des colonnes dans une mise en page multi-colonnes. Cela est utile pour contraindre la hauteur des colonnes pour la lisibilité lors de la définition de plusieurs colonnes à l'aide des propriétés column-count ou column-width.
Sans column-height, si la hauteur du contenu multi-colonnes dépasse la hauteur de la fenêtre, les lecteurs devront faire défiler jusqu'à la fin d'une colonne, puis revenir en haut de la colonne suivante. Une solution possible serait de définir une hauteur fixe sur le conteneur de contenu, cependant, les colonnes excédentaires déborderont alors sur le côté, et les lecteurs devront faire défiler horizontalement pour lire tout le contenu.
La propriété column-height, ainsi que column-wrap, permet de définir une hauteur spécifique pour les colonnes et de les envelopper sur une nouvelle rangée de colonnes lorsque le bord du conteneur est atteint.
La valeur par défaut de column-wrap est auto, ce qui se résout en wrap lorsque column-height est défini sur une valeur de type <length> ; wrap permet aux colonnes à hauteur fixe de s'enrouler sur plusieurs rangées. Lorsque column-height est égal à auto, column-wrap: auto se résout en nowrap, permettant aux colonnes de déborder horizontalement si une hauteur de conteneur fixe est définie. En raison de ce comportement par défaut, il n'est généralement pas nécessaire de définir explicitement la propriété column-wrap.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | Conteneurs de type bloc, sauf les boîtes englobant les tableaux |
| Héritée | non |
| Valeur calculée | auto if specified as auto, otherwise for <length> the absolute value specified |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
column-height =
auto |
<length [0,∞]>
Exemples
Utilisation simple
Cet exemple démontre une utilisation simple de la propriété column-height pour créer une mise en page multi-colonnes enveloppée.
HTML
Nous incluons un poème de Dr. Seuss en utilisant une liste ordonnée (<ol>) contenant 28 éléments <li>, suivi du nom de l'auteur dans un paragraphe (<p>).
<ol>
<li>Un poisson</li>
<li>Deux poissons</li>
<li>Poisson rouge</li>
<li>Poisson bleu</li>
...
</ol>
<p>-- Dr. Seuss</p>
CSS
Nous définissons la liste ordonnée (<ol>) comme un conteneur multi-colonnes en définissant la propriété column-width à 150px, ce qui signifie que le conteneur contiendra autant de colonnes que possible, chacune ayant au moins 150px de large. La propriété gap de 2em définit un écart horizontal entre les colonnes et un écart vertical entre les rangées de colonnes. Nous définissons ensuite la column-height à 2em, ce qui fait que la valeur par défaut auto de la propriété column-wrap se résout en wrap pour créer des rangées de colonnes enveloppées.
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
Résultat
Colonnes avec un défilement à accroche
Cet exemple combine une mise en page multi-colonnes enveloppée par un défilement à accroche CSS, créant une expérience utilisateur·ice où chaque action de défilement accroche une nouvelle rangée de colonnes à l'intérieur de la hauteur complète de la fenêtre pour une lecture confortable.
HTML
Le HTML, qui contient plusieurs paragraphes de contenu provenant des pages d'accueil MDN HTML, CSS et JavaScript, a été masqué pour des raisons de concision.
CSS
Nous commençons par définir column-width sur l'élément HTML <body> pour définir la largeur préférée des colonnes. Un gap de 3em 2em entraîne un espace de 3em entre les lignes et un espace de 2em entre les colonnes. Le column-rule ajoute une ligne au centre de l'espace entre les colonnes. La column-height de 95vh rend les colonnes presque aussi hautes que la fenêtre d'affichage.
Nous définissons explicitement column-wrap sur wrap comme rappel du comportement de retour à la ligne appliqué. Nous aurions pu définir la valeur sur auto ou omettre complètement la propriété, car, par défaut, column-wrap se résout en wrap lorsque column-height est défini sur une valeur <length>.
body {
column-width: 150px;
column-rule: 2px solid red;
gap: 3em 2em;
padding: 0 2em;
column-height: 95vh;
column-wrap: wrap;
}
Ensuite, nous définissons la propriété column-span de l'élément HTML <h1> sur all, afin que le titre s'étende sur toutes les colonnes, et nous définissons la propriété margin-top du premier <p> sur 0 afin qu'il s'aligne avec le haut des colonnes.
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
Enfin, nous ajoutons le défilement par accroche en définissant scroll-snap-type sur y mandatory sur l'élément <html>, et scroll-snap-align sur start sur les pseudo-éléments ::column qui représentent chaque colonne générée. Cela fait en sorte que le contenu s'accroche en haut d'une nouvelle colonne à chaque fois qu'il est défilé.
html {
scroll-snap-type: y mandatory;
}
::column {
scroll-snap-align: start;
}
Résultat
Essayez de faire défiler le contenu. Remarquez comment chaque nouvelle ligne de colonnes remplit la fenêtre d'affichage, et comment le contenu s'accroche proprement en haut d'une nouvelle ligne à chaque défilement.
Zone de test de column-height et column-count playground
Cet exemple s'appuie sur le précédent en incluant deux curseurs de plage qui vous permettent d'ajuster le nombre de colonnes et la hauteur des colonnes dans la mise en page multi-colonnes.
HTML et JavaScript
Le HTML est le même que dans l'exemple précédent, avec l'ajout d'un formulaire contenant deux éléments <input type="range"> qui mettent à jour les valeurs de column-count et column-height via JavaScript. Le HTML et le JavaScript sont masqués pour plus de concision.
CSS
Nous définissons la column-rule et la gap avec les mêmes valeurs que dans l'exemple précédent. Nous ne définissons pas de column-width ; à la place, nous créons une mise en page multi-colonnes en utilisant la propriété column-count, en réglant de manière interactive le nombre de colonnes et la hauteur des lignes de colonnes avec JavaScript. Le défilement par accroche n'est pas inclus dans cet exemple.
body {
column-count: 3;
column-height: 20em;
column-rule: 2px solid red;
gap: 3em 2em;
padding: 0 2em;
}
Résultat
Ajustez le nombre de colonnes et la hauteur des colonnes pour voir l'effet de ces propriétés.
Spécifications
| Spécification |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-height |
Compatibilité des navigateurs
Voir aussi
- La propriété
column-count - La propriété
column-width - La propriété raccourcie
columns - La propriété
column-wrap - Le module de mise en page multi-colonnes CSS