Chapter 3. CSS grids without the math
This chapter covers
- Basic grid theory and when you might use a grid
- CSS grid framework options when using Compass
- Maintaining vertical rhythm in your layouts using typography helpers
Whitespace is a powerful, yet often underutilized aspect of great web design. Whitespace (or negative space) is the area between “the other stuff” in your layouts and content. Whitespace can create separation between types of information, helping you to visually scan content or calling your attention to items of greater importance.
A grid is a layout framework that helps you make efficient use of whitespace in your web pages, providing uniform dimensions for columns and rows of content, as well as other whitespace elements like margins and gutters. Though grids have been common in print since the invention of the printing press, they became popular in web design only a few short years ago. In addition to providing some best practices for whitespace use in your designs, CSS grids also allow for rapidly prototyping new layouts, since you can more quickly adjust the width of content areas.
Uniform whitespace isn’t just a matter of aesthetics; it helps you scan and read content. Our eyes are drawn to the space between objects on a page, and uneven amounts of whitespace draw attention. This can be either good or bad, but too much attention leads to cognitive noise.