Excerpt

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.

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, 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, still considered the seminal book on the topic today (and a darn pretty book). He summarizes the concept nicely:

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

—Josef Müller-Brockmann

Oddly enough, the advent of the personal computer, which relieved the need for hand-set typography, spurred a transition away from this style, resulting in experimentation against the grid’s rules. However, as the web has become richer, it has become a second home for these typographic and layout tenets.