Column-height - CSS Property
Summary of characteristics of the column-height property
autoautoComputed value: during an animation, the column-height property gradually changes from one value to another.Single: single value (no order).Syntax diagram of column-height.
column-height property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
length: a numeric value, positive or zero, followed by a CSS dimension units.
Description of the column-height property.
column-height is still an experimental property. Firefox 
and Opera 
, for example, don't recognize it.
column-height sets the height of the columns. If the content is bigger, a new set of columns is started below.
This way, you get a table where the content automatically spreads across the cells.
The horizontal space between the cells is defined by column-gap, while the vertical space is defined by row-gap.
⚠ doesn't work on all browsers.
Here's the order in which the cells fill up:
Values for column-height.
- column-height: auto;
The height of the columns is calculated automatically, mainly from the
heightproperty of the container.This text is formatted in two columns. The column-height property has been set toauto, so the height of the columns is determined automatically. Most of the time it is determined by the value ofheight.column-height:auto; - column-height: 400px; d
dis a positive or zero value, followed by one of CSS dimension units. The height of the columns is set to the specified value.This text is formatted into two columns. The column-height property has been set to65px, so the height of the columns is fixed at that value. If the content is large enough, another set of columns is created to hold it, and so on.column-height:65px; - column-height: initial; (
auto) column-height: inherit; column-height: revert; column-height: revert-layer; column-height: revert-rule; column-height: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the column-height property.
The column-height property animates, of course, and gradually. In the example below, it seems like there is a sudden jump from one value to another,
but that's because the number of lines per column is an integer.
The result of animating column-height is a bit surprising but can be useful in some cases.
Access the column-height property via a program
With Javascript, change the value of column-height.
In JavaScript, here's how to change the value of column-height. You can see that JavaScript offers a syntax using the typical CSS notation,
in kebab-case (a dash to separate words), and another syntax using camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['column-height'] = '500px';
// or
let el = document.getElementById('id');
el.style.columnHeight = '500px';
With Javascript, read the value of column-height.
The property must have been applied directly to the element itself via its style attribute, and not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['column-height'];
// or
let el = document.getElementById('id');
let value = el.style.columnHeight;
With Javascript, read the computed value of column-height.
The computed value is the one that comes from evaluating the relative units (except for the percentage) and taking any inherited values into account.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('column-height');
With JQuery, read or change the value of column-height.
JQuery, the well-known library, also offers syntaxes for writing or reading the value of column-height.
// Read the value:
$('#id').prop('column-height');
// Write the value:
$('#id').prop('column-height', '500px');
$('#id').prop('{column-height': '500px'});
With JQuery, read the computed value of column-height.
let value = $('#id').css('column-height');
Other code examples.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the column-height property and then display either the value as it was applied or the computed value.
This second option lets you see how the value of column-height is stored (serialized). In particular, you can see that percentages are properly
stored as percentages (see the chapter on the inheritance in CSS). All other units are converted to pixels.
Simulator.
Browsers compatibility with column-height.
The column-height property is still not well recognized by browsers. Firefox , for example, doesn't handle it.
column-height property, which sets the height of the columns, even if it splits the text.column-heightproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
See also...
The CSS specifications published by the W3C are organized into modules. The column-height property is part of the CSS Multi-column Layout Module.
The following definitions are also described in this same module.
Properties:
