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.

Follow me

Submit a Comment