CSS: The Missing Manual, 4th Edition

Chapter 16. Using a CSS Grid System

So far you’ve learned a number of layout techniques, like how to create float-based layouts to create multiple side-by-side columns and how to create responsive designs that change their layout based on the width of the device displaying the web page. But when your site will appear on screens of all different shapes and sizes, you need all the control you can get.

This chapter expands on the concepts in the previous few chapters and shows you the most precise, yet responsive, page design technique of all—the CSS layout grid. A layout grid is a systematic arrangement of rows and columns used as an organizational tool for laying out content. In the world of CSS, a grid system is a predefined style sheet with styles that make it easy for web designers to add a layout grid to their pages. Grid systems use class names added to <div> tags in a page’s HTML to create consistently sized columns.

How Grids Work

Grids have a long history in graphic design and traditional page layout. There are various theories about how to best organize content using grids to create beautiful designs, but most of them rely on the unchanging nature of print design and don’t translate well to the flexible nature of browsers.

In web design, a grid acts as a way to organize content into rows and columns using consistent column widths. A page’s width is divided into a set number of “units” that group easily to create columns of different widths. A common number of units is 12, since ...