Converting Static Grids to Responsive Grids

At this point we want to take the Static Layout

http://thomaswallace.net/demos/responsive/static/

and convert it to something more responsive.

For Example the grid we created in class used the following dimensions

To convert this into something more responsive we need to use the following formula.

Target / Context = Result

Let’s work through this rule by rule.

#wrapper

While we can certainly declare a percentage width for our containing element, I prefer to maintain some control over width so rather than declare in percentages for our containing element  we are going to use the max-width css property. This allows us maintain limits on the overall width but at the same time we can still scale down as needed.

#content primary

The fixed width dimensions of this element was 638px to convert this to percentages the math looks like so…

638px (target) / 960px (context)= 0.664583333

Slide the Decimal two places to the right and we have our first percentage width element!

New Width = 66.4583%

We also have a 20px margin to consider. Lets convert that to percentages as well.

20px (target) / 960px (context) = 0.0208333333

Slide the Decimal two places to the right.

New Width = 2.08333333%

Go ahead and convert the rest using this formula. When you are done you should have something like this…

Finished Example – http://thomaswallace.net/demos/responsive/percentage/