CSS3 Multi-column Layout

Today, we can layout the web content into column more seamlessly with CSS3 Column. This demo shows how to create it.

Column Count

Consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.

Code

article {
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
}

Column Width

Consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.

Code

article {
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	column-width: 150px;
}

Column Gap

Consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.

Code

article {
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	column-width: 150px;
	/*column gap*/
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
}

Column Rule

Consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.

Code

article {
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	column-width: 150px;

	-webkit-column-gap: 50px;
	-moz-column-gap: 50px;
	column-gap: 50px;

	-moz-column-rule: 1px dotted #ccc;
	-webkit-column-rule: 1px dotted #ccc;
	column-rule: 1px dotted #ccc;
}

This is the Column Span Demo

Consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.

Code

article h1 {
	-webkit-column-span: all;
	column-span:all;
}