CSS banner image.

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

I have applied the CSS to an <article> element (an HTML5 tag) with the class column-container. 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;
}

Feel free to experiment in the below Codepen:

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

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.