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.

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.

Try it

  • Exercise One (Easy)

    Given the following markup, using ems only, make the <p>’s default text 12px, the <h1>’s text 24px, and both <a>s’ text 16px:

      <h1>Building Responsive Data Visualization for the Web. 
        <a href="/dataViz">Read more</a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. 
      <a href=”/somewhereElse”>Another link</a>

    A sample solution is provided in the repository.

  • Exercise Two (Intermediate)

    Starting where you ended in the blog exercise in the book, change the #container’s ideal width to 1024px, but keep everything else uniform.

    A sample solution is provided in the repository.

  • Exercise Three (Hard)

    Using the same markup, change the blog exercise to use a 16-column grid, rather than 12-column grid presented.

    A sample solution is provided in the repository.

Enjoying what you're reading? There's plenty more.

Order the book