Responsive Newspaper-Style Columns are Easy with CSS

Newspaper or magazine-style columns are a good way to break up large blocks of text, especially if images are included.  With CSS, responsive columns are really easy to achieve.

The following demo shows two blocks of columns, one with a title that spans all of the columns, and one with an image.  Here is the CSS I used (this was done pretty on the fly and some of the code could be condensed a little better in a production environment).

article{ 
	width: 100%;
	height: auto;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 5%; /* Chrome, Safari, Opera */
    -moz-column-gap: 5%; /* Firefox */
    column-gap: 5%px;

    -webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #ccc; /* Firefox */
    column-rule: 1px outset #ccc;	
	margin: 0 auto;
	text-align:justify;
}
figure{
    column-span: none;
    -webkit-column-span: none;
    -moz-column-span: none;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	text-align:center;
}
img.aa{
	height: 150px;
	width: auto;
}

article h1{
	column-span: all;
    -webkit-column-span: all;
    -moz-column-spam: all;
	margin: 0;
}


.newspaper
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
	text-align:justify;
}

.newspaper h1, .newspaper img.aa {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
}
.newspaper p {
    -webkit-margin-before: 0;
}
@media only screen and (max-width: 840px) {
	.newspaper {
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-count:2;
	}
	article{ 
		width: 100%;
		height: auto;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	
		-webkit-column-gap: 5%; /* Chrome, Safari, Opera */
		-moz-column-gap: 5%; /* Firefox */
		column-gap: 5%;
	
		-webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
		-moz-column-rule: 1px outset #ccc; /* Firefox */
		column-rule: 1px outset #ccc;	
		margin: 0 auto;
		text-align:justify;
	}
	
}
@media only screen and (max-width: 700px) {
	.newspaper {
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1;
	}
	article{ 
		width: 100%;
		height: auto;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	
		-webkit-column-gap: 5%; /* Chrome, Safari, Opera */
		-moz-column-gap: 5%; /* Firefox */
		column-gap: 5%;
	
		-webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
		-moz-column-rule: 1px outset #ccc; /* Firefox */
		column-rule: 1px outset #ccc;	
		margin: 0 auto;
		text-align:justify;
	}
	
}

If you want to play with the original and see how it reacts to browser widths just click here.

Diane Ensey
Follow me

Diane Ensey

Programming Diva and CEO at Beyond Paper
For more than 10 years I've been making websites work for clients world-wide using WordPress, Google Maps, forms and custom applications. You can see my work portfolio and case studies at Beyond Paper.
Diane Ensey
Follow me

Submit a Comment