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.

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

Fixed grid example:
Fluid grid example:

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




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s