O'Reilly logo

Responsive Web Design with HTML5 and CSS3 Essentials by Asoj Talesra, Gaurav Gupta, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Understanding the mechanics of grid layouts

So far, we explored one of the key critical elements of responsive design, in the form of how we would set our available screen estate (or viewport)—as someone once said, it's time...

Absolutely—it's time we cracked on and explored how grids operate! The trick behind grids is nothing special; it boils down to the use of a single formula to help define the proportions of each element used in our layouts:

target ÷ context = result

Let's imagine that we have a layout with two columns, and that the container (or context) is 960px wide (I will use pixel values purely to illustrate the maths involved).

To create our layout, we will make use of the Golden Ratio that we touched on in Chapter 1, Introducing Responsive ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required