Columns

6/2/2021

CSS allows web content to be displayed in equal-sized columns. These columns may be defined by specifying either the number of columns desired or the width of columns. A number of attributes are involved.

Also, vendor prefixing is common!

Attributes

Column-count

This attribute specifies the number of columns to be displayed.

Column-width

This attribute defines how wide the columns will be; if column-count is not specified, the browser will render as many columns as will fit based on the specified width.

Column-gap

This attribute specifies the space beteen columns.

Column-rule-width

This optional attribute defines the width of a line between the columns.

Column-rule-style

This optional attribute defines the style of the line between columns (solid, dashed, etc.).

Column-rule-color

This optional attribute defines the color of the line between columns.

Column-span

This attribute is used with content within the columns to allow certain content to cover multiple columns.

column-span: all

Potential Issues

There are several possible issues. Often, the first image or piece of text will not be correctly aligned. The easiest way to correct this is to add the following CSS code margin-top: 0;

In other instances, you may find items breaking at the wrong spot. This is especially troublesome when using columns to create a quick photo gallery. Add the following CSS code. It should be applied to whatever you wish to keep together.

-webkit-column-break-inside: avoid;
page-break-inside: avoid; 
break-inside: avoid;

Note: when creating a photo gallery or cards layout with columns, the line spacing may need to be adjusted to eliminate extra line spaces between elements.

Examples

Example 1: Set Number of Columns

CSS

.example1 {     
    column-count: 3;
    column-gap: 5%;
    column-rule-width: 1px;
    column-rule-style: solid;
    column-rule-color: black;
}

.example1 h2 {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
    text-align: center;
}

HTML

<div class="example1">
    <h2>Title</h2>   
    <p>contents</p>
</div>

Three Columns of Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget mauris eget nulla sollicitudin maximus. Etiam orci nulla, cursus sed magna at, feugiat congue sem. Sed lobortis eget massa eu dignissim. Donec a tortor dictum, volutpat enim at, pharetra neque. Praesent dictum odio quis euismod venenatis. Cras lacinia augue in efficitur molestie. Nunc auctor felis nec mi sollicitudin, eget condimentum orci pellentesque. Quisque maximus lacus vitae lorem interdum, non vulputate ligula eleifend. Nunc eget urna ligula. Mauris condimentum vestibulum porta. Donec quam sapien, molestie eget est sit amet, congue fringilla dolor. Mauris sapien eros, faucibus nec velit in, imperdiet hendrerit ex.

Suspendisse posuere mi sit amet gravida posuere. Etiam rhoncus risus nisi, eu efficitur orci cursus vel. Duis in pellentesque elit. Etiam ullamcorper odio id semper mattis. Vestibulum cursus faucibus consequat. Pellentesque pellentesque rhoncus odio non cursus. Ut ut sem turpis.

Suspendisse faucibus sagittis dui, a fermentum orci efficitur at. Aliquam tincidunt est porttitor velit pretium, eget interdum ante aliquet. Ut non massa ut dolor pellentesque ornare. Ut eget elementum augue. Nunc quis tempor dolor. Vivamus tempus suscipit magna sed blandit. Integer tempus mi velit, volutpat imperdiet enim scelerisque eget. Curabitur dapibus eu felis id accumsan.

Aliquam tempor non nisl sit amet sagittis. Mauris id tempus metus. Duis consectetur vestibulum consectetur. Donec et pharetra leo, vel consectetur sapien. In non consequat erat. Pellentesque placerat hendrerit mauris, ut condimentum lectus venenatis et. Proin condimentum nisl elit, vitae cursus enim dapibus in. Sed sed vehicula mauris. Sed malesuada lectus non purus volutpat, a viverra elit tempor. Phasellus viverra nulla nibh, et ullamcorper nisi dignissim malesuada. Proin sit amet viverra sapien. Suspendisse blandit lectus vitae mauris hendrerit, sed pretium ligula interdum.

Vestibulum nibh lectus, viverra in elementum id, eleifend ac dolor. Sed at auctor massa. In nec est diam. Phasellus blandit enim et suscipit finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ultricies finibus dolor eget mollis. Nam vehicula eu eros vel vestibulum. Phasellus eleifend nibh non eros luctus, eget suscipit justo porttitor. Suspendisse feugiat eget libero posuere rhoncus. Sed volutpat arcu sit amet lobortis semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ut sapien elementum, vulputate urna eget, pretium elit. Cras dictum odio quis sem posuere consectetur. Etiam condimentum dui id libero rutrum congue.

Example 2: Set Width of Columns

CSS

.example2 {     
    column-width: 400px;
    column-gap: 5%;
    column-rule-width: 1px;
    column-rule-style: solid;
    column-rule-color: black;
}

.example2 h2 {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
    text-align: center;
}