Grid System

rn

Grid Layout

rn

Responsive fluid grid system that appropriately scales up to 12 columns. Resize your browser on your desktop to see the responsiveness in action!

rn

Find out more about the grid system on the official sites

rn


rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

1

rn

rn

rn

2

rn

rn

rn

2

rn

rn

rn

2

rn

rn

rn

2

rn

rn

rn

2

rn

rn

rn

2

rn

rn

rn

3

rn

rn

rn

3

rn

rn

rn

3

rn

rn

rn

3

rn

rn

rn

4

rn

rn

rn

4

rn

rn

rn

4

rn

rn

rn

6

rn

rn

rn

6

rn

rn

rn

12

rn

rn

rn


rn

rn

One Fourth

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.

rn

rn

rn

One Fourth

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.

rn

rn

rn

One Fourth

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.

rn

rn

rn

One Fourth

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.

rn

rn

rn

One Third

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.

rn

rn

rn

One Third

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.

rn

rn

rn

One Third

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.

rn

rn

rn

One Half

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Etiam posuere lacus quis dolor. Praesent dapibus. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam bibendum elit eget erat. Integer in sapien.

rn

rn

rn

One Half

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Etiam posuere lacus quis dolor. Praesent dapibus. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam bibendum elit eget erat. Integer in sapien.

rn

rn

rn

Full Width

rn

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Etiam posuere lacus quis dolor. Praesent dapibus. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam bibendum elit eget erat. Integer in sapien. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Mauris metus. Nullam eget nisl. Nulla pulvinar eleifend sem. Cras elementum. Pellentesque ipsum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Integer imperdiet lectus quis justo.

rn

rn

rn

Deja un comentario

Tu dirección de correo electrónico no será publicada.