Grid Layout

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

Find out more about the grid system on the official sites

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

One Fourth

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

One Fourth

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

One Fourth

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

One Fourth

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

One Third

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.

One Third

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.

One Third

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.

One Half

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.

One Half

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.

Full Width

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.


الأعلى