In this section, we'll discuss the first of the three main components of responsive web design, the fluid grid, or a percentage-based layout. We'll look at converting a fixed width layout into a fluid grid, and to do this, you'll need to learn the formula for converting pixels into percentages.
Fluid grids
Converting pixels to percentages
Right now, we have a fixed width layout, as shown in the following screenshot:
If you shrink the browser, you can see how it breaks down into smaller sizes, as shown in the following screenshot:
Creating a fluid grid is the first step in fixing this. The goal is to convert all our pixel-based widths, as well as left and right margins and left and right padding, into percentages...
