Jump Start Responsive Web Design, 2nd Edition

Chapter 3: Better Responsive Structures with Grid Systems

So far, we’ve looked at the underlying principles of responsive design and the power of media queries to build page structures optimized for different devices. In this chapter, we’ll see how grid systems can supplement and even replace some of the techniques we’ve covered so far, providing more flexibility for how pages display across different devices.

While flexibility in design is endless in theory, a common design ethic in print and digital design has been to use loose horizontal and vertical grids for element layout. They help break up sections of a page into logical areas that are easier to manage, and our brains like to see items in a composition in predictable lines. Composition ...