Building out a system to define grids, spacing, and layouts is a process closely linked with decisions you’re making about typography, and you'll most likely tackle them in tandem with one another. In the end, you want to establish a system with constraints that enforce consistent design patterns that help you rationalize decisions about size and spacing, but also leaves you with a flexible scaffolding that can be used to solve a wide variety of UI challenges.
One of the first things you may want to establish is a baseline grid—this is usually directly influenced by your line height with either a one to one mapping or a smaller increment that divides into the line-height equally.
- 8px can define a baseline grid, so this means you essentially have a row every 8px
- Line heights are created in multiples of 8px. This ensures everything lines up nicely across columns. Let’s say we use a 16px base font size and a line height that is 1.5x (24px). Every 3 rows we have a line of text that maps to that baseline grid.
- As we build out components, we can use this grid to figure out a consistent pattern for sizing and padding. If our button has 16px / 24px text, a 40px button (5 grid rows) would leave us with an extra 8px of padding above and below the label (remaining 2 rows).
- As we think through margins between elements, such as the spaces between subheads and paragraphs, the padding inside of a card, or the spaces between cards, we can also build these from multiples of 8px. Using our baseline grid as a guideline can help us create a predictable rhythm between elements and can take much of the guesswork out of the process.
- Depending on the density of information you need to support in your system, you may also consider using a smaller increment such as 4px, like Google's Material Design.
Column grids and layouts
With a solid baseline grid, you can also create additional grids to add vertical columns to your design. Not only will these columns help divide your screen into different sections, but the gutters (spacing) between columns can add horizontal rhythm to your design. For really flexible desktop grids, many designers like 12 column grids because they can be evenly divided into halves, thirds, quarters, and sixths. On mobile devices you will have much less real estate, so you may want a grid with far fewer columns—maybe only one or two! Many teams will define at least 3-4 breakpoints to address web products that need to be fully responsive. The widths where these breakpoints kick in are also usually defined in tokens of variables within the system to ensure everyone’s on the same page.
As you determine how these grids will scale across devices, there are lots of details to think through: How will your grid behave? Completely fluid? Fluid up until a point where the grid reaches a max width? Will your column gutters be fixed or fluid?
Also, consider if certain elements will need to behave differently and extend outside the grid. For example, you may have a grid that maxes out at a certain width on desktop when centered on the display, but you may want full-width elements like headers, footers, and nav bars which are fluid and full-width.
Here are some deep-dive guides to help you get started:
Structuring your content, how to handle layouts, and content positioning are probably the first decisions you’re going to make when building a design system. In this post, Claudia walks you through how to implement grid systems and CSS techniques to create specific layouts. Check out this post to learn how to create a solid system of CSS globals and build a library of web components.
Component libraries are full of spatial complexity because space is used everywhere: padding, margin, and absolute positioning’s left, right, top and bottom. Grid is not space, it is a component using space. When it comes to spatial relations, don’t stop at the grid. Nathan Cutis offers tips for building a complete spatial system including setting a base, establishing a scale, and developing naming conventions. But space doesn’t stop there. This article dives into an expanded vocabulary and new concepts for systematizing the usage of space in a way that can be understood and applied by anyone using your system.
This article, written by a developer for Smashing Magazine, gives you a good understanding of grid systems, what they are, and how to apply them to your design process. Read this article to go deeper on: * what grids are * a brief history of the grid * a basic theory of grids * four types of layout grids * layout grids in interactive design