Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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:

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

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

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.
share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.