Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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
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

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

Your Answer


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.