Fixed Grid vs. Fluid Grid

Time for a short post. Today I’m looking at how to use twitter bootstrap. I took a look at the tutorial about the grid system, so I saw that they have this fixed grid system and fluid grid system. After reading through and trying hard to find out what’s their difference on the site, I finally gave up. They really looked the same. So it’s time for some googling. Ah-ha! Lucky enough, there’s a 100+ upvoted thread in Stackoverflow discussing about this topic.

http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it-all-fit-t

In short the fixed grid will not stretch itself longer even your browser width increased; while fluid grid will stretch itself.

Fixed grid example: http://twitter.github.io/bootstrap/examples/hero.html
Fluid grid example: http://twitter.github.io/bootstrap/examples/fluid.html

They even provide the raw html and css code to further explain fluid/fixed + non-responsive/responsive:

Fluid-only: http://jsfiddle.net/5JECu/
Fluid-responsive: http://jsfiddle.net/ZnEEa/
Fixed-only: http://jsfiddle.net/eterpstra/ZR4zz/3/
Fixed-responsive: http://jsfiddle.net/eterpstra/rdvaG/12/

Bye!

Advertisements