Building Responsive Data Visualization for the Web

Chapter 03 Working with a Flexible Grid

The grid is the very base level of responsive design. We tailor our grid to both the viewport’s dimensions and the typographic needs of the website in order to create a visual hierarchy, while relying on a mathematical system to keep our design maintainable.

In this chapter, we’ll walk through the basics of designing grid systems, exploring a tangible example of creating a fixed-grid system in code, recreating that system with flexible units, and then dipping our toes into creating reusable flexible grids.

The Gist

Grids have informed graphic design in one form or another for a long time, with results ranging from the surprising to the hilarious.

In the mid-twentieth century, graphic designers such as Josef Müller-Brockmann, influenced heavily by modernist ideas put forth in Jas Tschichold’s Die neue Typographie (Verlag des Bildungsverbandes der Deutschen Buchdrucker, 1928), began to challenge previously held conventions regarding page layout. If you’re struggling to envision “previously held conventions regarding page layout,” think of a spinning newsreel from a 1930’s film, or a busy ad for cigarettes as a cure for polio.

Modernists like Müller-Brockmann, Emil Ruder, and Max Bill began to establish a system for establishing consistency and coherency on a page. In 1961, Müller-Brockmann published Grid Systems in Graphic Design (Braun), still considered the seminal book on the topic today (and a darn pretty book). He summarizes the concept ...