Justify Grid

Overview

The Justify Grid exploits the CSS property text-align: justify; to evenly space columns across the page. I really like this method!!

Pros:

No need to calculate gutters
The left-most and right-most columns are vertically aligned with the surrounding content. This is a huge win.
No need to define “rows” if you don’t want to; it just automatically flows.
Like other grids, it is responsive.
Minimal CSS, minimal HTML.
Works fine with responsive images.

Cons:

The width of the column gutters varies depending on the width of the screen. This is usually a minor issue.
You may need to add dummy placeholders (thereby junking up your markup) so the last “row” displays nicely.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum scelerisque ligula ut condimentum. Fusce et dui nibh. Ut consequat felis ac nisl blandit, vel viverra lacus consectetur. Mauris porta ante vel mauris ornare venenatis. Donec ac pellentesque nibh, quis auctor nunc. Suspendisse nec ipsum nec purus malesuada hendrerit. Duis a mollis augue. Ut pulvinar felis sed arcu cursus ultricies. In commodo dui dui, eget ultrices mi efficitur et. Vestibulum lobortis imperdiet erat. Maecenas eu arcu nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum scelerisque ligula ut condimentum. Fusce et dui nibh. Ut consequat felis ac nisl blandit, vel viverra lacus consectetur. Mauris porta ante vel mauris ornare venenatis. Donec ac pellentesque nibh, quis auctor nunc. Suspendisse nec ipsum nec purus malesuada hendrerit. Duis a mollis augue. Ut pulvinar felis sed arcu cursus ultricies. In commodo dui dui, eget ultrices mi efficitur et. Vestibulum lobortis imperdiet erat. Maecenas eu arcu nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum scelerisque ligula ut condimentum. Fusce et dui nibh. Ut consequat felis ac nisl blandit, vel viverra lacus consectetur. Mauris porta ante vel mauris ornare venenatis. Donec ac pellentesque nibh, quis auctor nunc. Suspendisse nec ipsum nec purus malesuada hendrerit. Duis a mollis augue. Ut pulvinar felis sed arcu cursus ultricies. In commodo dui dui, eget ultrices mi efficitur et. Vestibulum lobortis imperdiet erat. Maecenas eu arcu nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum scelerisque ligula ut condimentum. Fusce et dui nibh. Ut consequat felis ac nisl blandit, vel viverra lacus consectetur. Mauris porta ante vel mauris ornare venenatis. Donec ac pellentesque nibh, quis auctor nunc. Suspendisse nec ipsum nec purus malesuada hendrerit. Duis a mollis augue. Ut pulvinar felis sed arcu cursus ultricies. In commodo dui dui, eget ultrices mi efficitur et. Vestibulum lobortis imperdiet erat. Maecenas eu arcu nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum scelerisque ligula ut condimentum. Fusce et dui nibh. Ut consequat felis ac nisl blandit, vel viverra lacus consectetur. Mauris porta ante vel mauris ornare venenatis. Donec ac pellentesque nibh, quis auctor nunc. Suspendisse nec ipsum nec purus malesuada hendrerit. Duis a mollis augue. Ut pulvinar felis sed arcu cursus ultricies. In commodo dui dui, eget ultrices mi efficitur et. Vestibulum lobortis imperdiet erat. Maecenas eu arcu nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum scelerisque ligula ut condimentum. Fusce et dui nibh. Ut consequat felis ac nisl blandit, vel viverra lacus consectetur. Mauris porta ante vel mauris ornare venenatis. Donec ac pellentesque nibh, quis auctor nunc. Suspendisse nec ipsum nec purus malesuada hendrerit. Duis a mollis augue. Ut pulvinar felis sed arcu cursus ultricies. In commodo dui dui, eget ultrices mi efficitur et. Vestibulum lobortis imperdiet erat. Maecenas eu arcu nulla.

The Code

<style type="text/css">
 .grid {
 	text-align:justify;
 }
 .grid:after {
	 content:'';
	 display:inline-block;
	 width:100%;
 }
 .grid .column {
	 display: inline-block;
	 text-align: left;
	 width: 100%;
	 margin:0;
	 vertical-align:top;
 }
 .grid .placeholder {
	 padding:0;
	 height:0;
 }
 
 /* These are some sensible defaults for the grid size based on screen width. */
 @media screen and (min-width: 481px) {
 	.grid .column {
 		width: 47%;
 	}
 }
 @media screen and (min-width: 769px) {
 	.grid .column {
 		width: 30%;
 	}
 }
 @media screen and (min-width: 1025px) {
 	.grid .column {
 		width: 22%;
 	}
 }
</style>

<div class="grid">
	<div class="column">Your content here</div>
	<div class="column">Your content here</div>
	<div class="column">Your content here</div>
	<div class="column placeholder"></div>
</div>