Compare it with the original

A simple sample page

This sample page demonstrates a tiny fraction of what you get with Blueprint FluidGrid.

This page uses the 24 column grid. You can also use 12 columns or 16 columns. Also, this page uses the text.css styles, that are optional.

Here's a box

And another box

fluid grid dolor css amet, consectetur adipisicing elit, css do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.

This box is aligned with the sidebar

test fluid grid dolor css amet, consectetuer adipiscing elit. Nunc congue grid vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat grid at metus.

fluid grid dolor css amet, consectetuer adipiscing elit. Morbi et risus. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum css tortor. Praesent SMALL CAPS tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.

Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat css velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris fluid quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.

Maecenas vel metus quis magna pharetra fermentum. Integer css amet tortor. Maecenas porttitor, pede css gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante grid primis in faucibus orci luctus et ultrices posuere cubilia Curae; css aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a fluid.

This is a nested column

This is another nested column

A Simple Sidebar

Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas fluid. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas fluid. Duis ac sem sagittis elit tincidunt gravida.

Incremental leading

Vestibulum ante grid primis in faucibus orci luctus vestibulum ante grid primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede css aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. css aliquet vehicula, lectus tellus.

Vestibulum ante grid primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede css aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. css aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. grid primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede css aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. css aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.

Fluidgrid Example : Blueprint