Columns

Clearity grid system provides you with the tools to layout your pages just the way you need them, no more compromise.

First column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui tortor, vel congue eros. Integer elit urna, adipiscing sit amet luctus et, laoreet nec turpis.

[ col size="1-3" pos="first"]
    Column content here
[ /col]

Second column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui tortor, vel congue eros. Integer elit urna, adipiscing sit amet luctus et, laoreet nec turpis.

[ col size="1-3"]
    Column content here
[ /col]

Third Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui tortor, vel congue eros. Integer elit urna, adipiscing sit amet luctus et, laoreet nec turpis.

[ col size="1-3" pos="last"]
    Column content here
[ /col]

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui tortor, vel congue eros. Integer elit urna, adipiscing sit amet luctus et, laoreet nec turpis.

[ col size="1-3" pos="first"]
    Column content here
[ /col]

2/3 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui tortor, vel congue eros. Integer elit urna, adipiscing sit amet luctus et, laoreet nec turpis.

Donec hendrerit, elit quis condimentum ullamcorper, libero elit blandit mauris, quis placerat ligula metus tincidunt elit. Sit amet luctus et, laoreet nec turpis. Praesent fermentum ante in eros vulputate imperdiet.

[ col size="2-3" pos="last"]
    Column content here
[ /col]

Half a column

Integer ac porta elit. Nunc quis sapien eget purus consequat condimentum. Integer libero lacus, feugiat in sagittis eget, suscipit in lectus. Sed sollicitudin, magna vitae suscipit ultrices, mauris elit dapibus dolor, congue suscipit neque tellus eget turpis. Phasellus mollis dapibus lectus eu molestie.

[ col size="1-2" pos="first"]
    Column content here
[ /col]

Another half

Integer ac porta elit. Nunc quis sapien eget purus consequat condimentum. Integer libero lacus, feugiat in sagittis eget, suscipit in lectus. Sed sollicitudin, magna vitae suscipit ultrices, mauris elit dapibus dolor, congue suscipit neque tellus eget turpis. Phasellus mollis dapibus lectus eu molestie.

[ col size="1-2" pos="last"]
    Column content here
[ /col]

Quarter

Phasellus blandit tellus in turpis dictum auctor. Donec posuere odio condimentum metus placerat ultricies. Vestibulum tempus egestas dolor, id bibendum mi semper non. Maecenas nec justo at nulla interdum rhoncus. Mauris sit amet justo est.

Half Column

Phasellus blandit tellus in turpis dictum auctor. Donec posuere odio condimentum metus placerat ultricies. Vestibulum tempus egestas dolor, id bibendum mi semper non. Maecenas nec justo at nulla interdum rhoncus. Mauris sit amet justo est. Aliquam eleifend diam a erat tempus scelerisque.

Aliquam sed vestibulum augue. Sed vitae felis non erat volutpat elementum. In vel neque sit amet nisl venenatis ullamcorper. Phasellus quam neque, hendrerit ac interdum eu, suscipit eu elit. Nulla tempor, tellus ut vulputate aliquam, diam nibh sodales eros, vitae auctor purus mauris suscipit eros.

Quarter

Phasellus blandit tellus in turpis dictum auctor. Donec posuere odio condimentum metus placerat ultricies. Vestibulum tempus egestas dolor, id bibendum mi semper non. Maecenas nec justo at nulla interdum rhoncus. Mauris sit amet justo est.