Responsive Web Design – Flexible Grid

There are a few ingredients that are used to achieve what has come to be known as Responsive Web Design.  In this post, we will be addressing the idea of a flexible grid.  We have used this on creating our own templates on the Genesis platform, but it can apply to other non WordPress platforms as well.

In the good old days, we used to only worry about pixels.  Also, in the good old days, almost everyone was only viewing websites on monitors and these monitors usually had a resolution of 800×600.  There were no iphone, ipads, iOS, or Android devices all with different screen sizes and resolutions.  As the web has changed, so have we.  In using the flexible grid, you now use percents rather than pixels to determine the dimensions of your elements.

Sound difficult? It’s really not!  It’s a relatively  easy conversion.  Since we’re using percents, a value is based off the width of the parent.

Here’s the formula for it:

 target ÷ context = result 

• the target is the number of pixels you want your element to be
• the context is the number of pixels of the parent element / containing div
• the result is a decimal number you have to convert to a percent by multiplying by 100 (move the decimal point over two places).

Here’s an example:

You have a #sidebar that’s 300px wide, with gutters of 20px.  The #sidebar is contained by the #wrap, which is 960px wide.

The formula to determine the percentage of the #sidebar would look like this:

 280 / 960 = 0.291666666666667 280 - the width of the containing element, minus the gutters 960 - the width of the parent element. 

now, move the decimal over two places, and you get 29.1666666666667%

 #sidebar { width: 29.1666666666667% } 

To calculate the gutters, you would use the same formula:

 20 / 960 = 0.020833333333333 or 2.0833333333333% 

so add that to your #sidebar

 #sidebar { width: 29.1666666666667% /* 280px  / 960px */ padding: 0 2.0833333333333% */ 20px / 960px */ } 

We’ve found it’s also helpful to place comments next to the property values with the pixel measurements you are using: good for future reference / co-coders / debugging that sort of thing…

Lastly, here are some good references in help creating that responsive flexible grid:

1. 1140 CSS Grid 
2. Less Framework:  A CSS grid system for creating adaptive websites
3. Respond: code for all those pesky browsers that don’t read media queries

What are you waiting for, get started with flexible grids!