Jump Start Responsive Web Design

Chapter 2Fluid Grids

We know that while computer monitors and laptop screens grow wider—with more pixels displaying on them—mobile devices are popularizing the smaller dimensions on offer. More than ever, we need a design approach that caters to our growing range of screen widths, as depicted in Figure 2.1.

Figure 2.1. The SitePoint website across one laptop, two desktops, three iPhones, and four iPads

The Role of Fluid Grids

The fluid grids of responsive web design are part of this approach. On the Web (and off), a grid is a way to manage space in a layout, as shown in Figure 2.2. The simplest grids—made up of one, two, and three columns—typically ...