How does the grid system work for a full width page?

Question

How does the grid system work for those websites that expand to the full size of the browser (no matter how you resize) while working with a base 12 grid system (such as 960.gs)?

For example, take a look on these websites:

• http://vevo.com
  ^{(Note: this site shows an error message instead of the real page when accessing from European counties like Germany)}
• http://xfinitytv.comcast.net

Is there a technical name for this?
Why are there not many websites like this that take advantage of the full browser size?

Answer 1

The term is 'fluid width' site--which is a layout that stretched to accommodate the browsers. Layouts that also re-arrange elements based on screen size (in addition to fluid stretching) is called a 'responsive layout' site.

Reasons why you may not want a site to stretch the full width:

• it can be a bit more challenging to design around than a fixed-width site
• there is a practical limit for things like readable line-lengths and such.
• There can be a point of diminishing returns.

Answer 2

There's different types of full-width layouts that work in different situations. Fluid Layouts, are determined by percentages, so let's say you wanted a five column layout, then each of your columns widths will be equal to 20%(20% x 5 = 100%). Another type would be Elastic Layouts which are determined by the type size most likely using ems. It all boils down to the needs of the project. Its very common to see Hybrid Layouts in which some combines two of more of the different layout types including Fixed Layouts that we're used to.