"Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts."

jQuery Masonry

Really nice layout, styling and animation details

実際のwebページの例を挙げながらの説明つきなので非常にわかりやすい。

Responsive web design, as described/defined by Ethan Marcotte anyway, is the act of creating various forms of the same basic site design that are optimized for different ranges of browser window widths.

Luckily, the way that I originally constructed the Heads-Up Grid made it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements. Even if you are not extremely comfortable with JavaScript, if you are ambitious enough to tackle responsive web design you will most likely have no problem figuring this out.

To create a responsive grid use the following code as a template. This template is fairly self-explanatory if you are familiar with CSS Media Queries. These JavaScript conditional properties should directly match the properties you are using for your media queries. Then simply define the properties of multiple grids in the same way you would define a single grid above.

The result should be a system that checks the browser window width on pageload as well as any time that the browser window is resized and render the appropriate grid.