Columns in HTML using CSS

A quick and easy method of adding columns to your HTML page using CSS to create a newspaper column layout.

1. HTML

Some simple HTML and some Lorem Ipsum placeholder text…

<h1>Here is an HTML column layout using CSS</h1>
<article class="column-container">
	<p>Here is a nice newspaper column layout using CSS.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</p>
	<p>Pellentesque libero lectus, tristique ac, consectetuer sit amet, imperdiet ut, justo. Sed aliquam odio vitae tortor. Proin hendrerit tempus arcu. In hac habitasse platea dictumst. Suspendisse potenti. Vivamus vitae massa adipiscing est lacinia sodales. Donec metus massa, mollis vel, tempus placerat, vestibulum condimentum, ligula. Nunc lacus metus, posuere eget, lacinia eu, varius quis, libero. Aliquam nonummy adipiscing augue.</p>
	<p>Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.</p>
	<p>Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi.</p>
</article>
<article class="full-width-container">
	<p>Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam. Donec elit est, consectetuer eget, consequat quis, tempus quis, wisi. In in nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
	<p>Donec ullamcorper fringilla eros. Fusce in sapien eu purus dapibus commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Cras faucibus condimentum odio. Sed ac ligula. Aliquam at eros. Etiam at ligula et tellus ullamcorper ultrices. In fermentum, lorem non cursus porttitor, diam urna accumsan lacus, sed interdum wisi nibh nec nisl. Ut tincidunt volutpat urna. Mauris eleifend nulla eget mauris. Sed cursus quam id felis. Curabitur posuere quam vel nibh.</p>
</article>

CSS

In the code below, I have applied the CSS to the <article> element (an HTML5 tag) with the class column-container. I have also made use of text-justify as I always think justified text looks great in a column layout.

The key CSS rule in this example is column-count:

.column-container {
	column-count: 3;
	column-gap: 2em;
	column-rule: 2px solid LightGray;
	text-align: justify;
	text-justify: inter-word;
}

Codepen

Feel free to experiment in the below Codepen:

See the Pen CSS Grid by David Fox (@foxbeefly) on CodePen.

References:

1. CSS column-count Property (no date) CSS column-count property. Available at: https://www.w3schools.com/cssref/css3_pr_column-count.php (Accessed: 29 November 2023).
2. CSS text-justify Property (no date) CSS text-justify property. Available at: https://www.w3schools.com/cssref/css3_pr_text-justify.php (Accessed: 29 November 2023).