Spacing and Grids in Interface Design: Whitespace, the 8-Point System and Layout Grids Explained

Picture yourself building your first landing page, say for a small yoga studio. Colors, fonts and photos are in place, and each piece looks fine on its own. Still, the page feels restless. The heading is glued to the image, the class descriptions sit close together in one place and far apart in another, and the button seems to float somewhere in empty space. When someone from development asks which spacing values to use, you open the file and find 13, 17, 22 and 30 pixels, scattered without any visible system.

This is exactly where spacing and grids come in. They are the invisible scaffolding of an interface. Nobody praises a website for its spacing, but almost everyone notices right away when it is off. The good news: you don’t need special talent to get spacing right, just a few simple rules.

In this article you’ll get to know three tools that belong together: whitespace as deliberately used space, the 8-point system as a fixed scale for spacing and sizes, and layout grids as column structures for arranging content on the page. At the end you’ll see how to set this up in Figma and how it carries over into code. No prior knowledge required.

Whitespace: Empty Space with a Job

Whitespace (also called negative space) is any area between and around elements that holds no content. The name is a little misleading: whitespace doesn’t have to be white. The dark background of an app in dark mode or a colored area counts too, as long as nothing sits there.

Beginners often see whitespace as wasted space that could still be filled. In reality it does important work. It separates content, shows what belongs together, draws the eye to what matters and gives text room to breathe. An interface without whitespace is like a text without paragraphs: all the information is there, but nobody can find their way around.

Micro and Macro Whitespace

It helps to distinguish two kinds of whitespace. Micro whitespace is the small space inside elements: between an icon and its label in a button, between a label and its input field, between the lines of a list. Macro whitespace is the large space between whole areas: between the header and the content, between two sections of a landing page, along the edges of the page.

The two need different orders of magnitude. Micro spacing typically falls between 4 and 16 pixels, macro spacing often starts at 48 pixels and goes up from there. When both kinds are roughly the same size, the boundaries blur and you can no longer tell where one section ends and the next begins.

Proximity Signals What Belongs Together

Why spacing matters so much is explained by one of the Gestalt principles, the law of proximity. It says that people perceive elements that are close to each other as belonging together. This happens automatically, before anyone reads a single word.

For you as a designer, that leads to a simple rule of thumb: the spacing within a group is smaller than the spacing to the next group. Sounds obvious, yet it gets broken all the time. A typical example from forms:

Before: The label “Email address” sits 16 pixels above its input field. The next label, “Password,” also sits 16 pixels below the email field. At first glance it’s unclear whether “Password” belongs to the field above or the one below.

After: Label and field are 8 pixels apart, and 24 pixels separate one field group from the next. Now each label and field visibly form a unit, and the form reads from top to bottom like a list.

This rule works at every level. Inside a card, title and text sit close together, cards are spaced further apart from each other, and whole sections of the page get even more room. The result is a hierarchy of spacing that the eye understands without lines or borders.

The 8-Point System

If whitespace matters this much, the obvious question is: how big should the gaps be? A fixed scale helps here. Instead of deciding for every element whether 13 or 15 pixels looks better, you pick from a small set of predefined values. The best-known of these scales is the 8-point system.

The idea is simple: all spacing and most sizes in the interface are multiples of 8. So 8, 16, 24, 32, 40, 48, 64 and so on. A button might be 48 pixels tall, a card might have 24 pixels of padding, and two sections might be 64 pixels apart.

What “Point” Means

The term “point” can be confusing because platforms use their own units. Apple talks about points (pt), Android about density-independent pixels (dp), and on the web you work with CSS pixels (px). What they have in common is that none of them match the physical pixels of a display. They are abstract units that get scaled up on high-resolution screens. According to the Android documentation, one dp is roughly one pixel on a 160 dpi screen. For the 8-point system, just remember this: a point is a unit in your design tool, and 8 of them make one step on the scale.

Why 8?

Several practical reasons favor 8. It can be halved cleanly several times (8, 4, 2, 1), which helps when scaling to different screen densities because you don’t end up with half pixels. Many common screen widths such as 360, 768, 1280 or 1440 are divisible by 8. And the steps are big enough that you can actually see the difference between two values. Hardly anyone can tell 13 from 15 pixels, but 16 versus 24 is obvious.

Another reason is simply how widespread it is. Google’s Material Design made the system popular. The first version of its guidelines states that all components align to an 8dp grid on mobile, tablet and desktop. The current Android documentation also names the 8dp grid as the basis for layout, components and spacing. Working on an 8-point grid puts you close to what many teams and libraries already use.

The most important reason, though, is a different one: fewer decisions. When only a handful of values are allowed, the design automatically becomes more consistent. And handoff to development gets easier because everyone uses the same numbers.

4 as the Half Step

Sometimes 8 pixels is too coarse, for example for the gap between a small icon and its text or for details in a dense table. That’s why many teams use 4 as a half step. Material Design recommends a 4dp grid for smaller elements such as icons and type. Some teams even call it a 4-point system. There’s no contradiction: 8 remains the foundation, and 4 joins in where things need to be finer.

Building a Spacing Scale

In practice you don’t define every multiple of 8. You set up a short scale with sensible steps. Something like this is enough to start with:

• 4: very tight spacing, such as between an icon and its text
• 8: closely related elements, such as a label and its input field
• 16: standard padding, such as in buttons and small cards
• 24: spacing between groups of elements, padding in larger cards
• 32 and 48: spacing between blocks within a section
• 64 and 96: spacing between major sections of a page

Notice how the steps get bigger toward the top? That’s intentional. With small values, a difference of 8 pixels is already visible. With large sections, you need 16 or 32. A scale that spreads out as it grows reflects that.

Back to the yoga studio. With this scale, the home page looks like this:

Before: Heading 13 pixels below the image, class descriptions 17 and 22 pixels apart, the button 30 pixels below the text, sections separated by 40 pixels here and 55 pixels there.

After: Heading 24 pixels below the image, each class card with 24 pixels of padding and 24 pixels to the next card, title and text inside the card 8 pixels apart, the button 32 pixels below the text, and a consistent 96 pixels between sections.

The content is exactly the same, yet the page suddenly feels calm and tidy. And development has a clear answer to the question about spacing.

Padding, Margin and Gap

Three terms will come up constantly when you work with spacing. Padding is the space between the edge of an element and its content, for example between the border of a button and its label. Margin is the space around an element that separates it from others. Gap is the space between several elements in a row or a grid.

The same scale applies to all three. With buttons and cards, make sure the padding fits the size. A large button with 4 pixels of padding looks cramped, and a small card with 48 pixels of padding looks empty.

Layout Grids: Columns That Bring Order to the Page

The 8-point system controls the size of the spacing. A layout grid controls where elements sit on the page. It divides the available width into columns of equal width that you align content to. The principle comes from newspaper and book printing and has survived in digital design because it solves the same problem: arranging lots of different content so that it forms a calm whole.

Columns, Gutters and Margins

A layout grid has three parts. Columns are the areas where content sits. Gutters are the fixed gaps between columns. Margins are the spaces between the outermost column edge and the edge of the screen.

An element can span one or more columns, including the gutters in between. A block of text might take up eight columns, with a sidebar next to it taking four. The key point: content starts and ends at column edges, not in the middle of a gutter. That creates shared edges across the whole page, and those shared edges are what make a layout feel orderly.

Gutters and margins follow the 8-point system too. Material Design listed values of 8, 16, 24 or 40dp for margins and gutters in its guidelines and made clear that the two don’t have to be equal. A layout with 40-pixel margins and 24-pixel gutters is perfectly fine.

Why 12 Columns Are So Common

On desktop you’ll run into 12 columns very often. There’s a mathematical reason: 12 is divisible by 2, 3, 4 and 6. That lets you split the same page into halves, thirds, quarters or sixths without any column left over. A 10-column grid, by contrast, can’t do thirds.

The popular CSS framework Bootstrap also uses 12 columns according to its documentation, with a default gutter of 1.5rem. At the usual base font size of 16 pixels, that’s exactly 24 pixels, which once again is a value from the 8-point system.

Fewer Columns on Small Screens

On a phone, 12 columns are too narrow to work with in any meaningful way. That’s why the number of columns adapts to the screen width. In its first guidelines, Material Design specified, for example, 4 columns for narrow phones, 8 columns for small tablets and 12 columns for larger screens, with 16dp gutters on small devices and 24dp gutters on large ones.

For a start, this rule of thumb is enough: 4 columns on phones, 8 on tablets, 12 on desktop. Because 4 and 8 fit neatly into 12, layouts translate well from one size to another. An element that spans three of twelve columns on desktop (a quarter) simply spans one of four columns on a phone, or the full width.

A Grid Is a Guide, Not a Cage

A layout grid is a tool, not a law. A background image can run the full width, and a quote can deliberately break out of the grid to stand out. These exceptions only work, however, when the rest of the page sits neatly on the grid. So break the grid on purpose and sparingly, not by accident.

Besides column grids there’s also the baseline grid, a set of horizontal lines that lines of text sit on. It makes sure text in neighboring columns lines up at the same height. For beginners, though, it’s not a must. If your line heights and spacing follow the 4 or 8 scale, you’re already close.

Step by Step: Spacing and Grids in Figma

Most teams design in Figma these days. You can put all three tools into practice there directly. Using the yoga home page as an example, here’s how.

1. Add a Grid to the Frame

Create a frame at desktop width, for example 1440 pixels. In the right sidebar, add a layout guide. Figma renamed the feature from “layout grid” to “layout guide” in May 2025, so many tutorials still use the old name. Choose the type “Columns,” set the count to 12 and the type to “Stretch.” Then enter the margin and gutter, for example 80 and 24 pixels. Press Shift and G to show or hide all guides.

For the mobile view, create a second frame that is 360 or 390 pixels wide, with 4 columns, a 16-pixel margin and a 16-pixel gutter.

2. Adjust the Nudge Amount

By default, Figma moves an element by 1 point with the arrow keys and by 10 points when you hold Shift. 10 doesn’t fit the 8-point system. Under Preferences and “Nudge amount,” you can set the big nudge to 8. From then on, Shift plus an arrow key lands you on values from your scale automatically.

3. Set Spacing with Auto Layout

Auto layout is the Figma feature that lets a frame arrange its contents automatically, stacked vertically or side by side. You enter padding and gap as numbers, and Figma keeps them in place even when the content changes. For the class card, that means padding of 24, a gap of 8 between title and text, and a gap of 24 to the button. If the text changes later, the spacing stays the same.

Since 2025, auto layout also offers a grid flow that arranges content in rows and columns, for example for a tile overview of the classes. To begin with, though, the simple horizontal and vertical flows are all you need.

4. Make the Scale Visible to Everyone

To keep everyone on the team from inventing their own values, it pays to document the spacing scale. A simple page in the Figma file with each value and an example is enough. If you later build a design system, you’ll turn this scale into named values that design and code share. The article Design Systems for Small Teams explains how small teams can pull that off.

Spacing and Accessibility

Spacing isn’t only about looks. It also decides whether people can operate an interface reliably. This matters most for clickable elements that sit close together, such as links in a footer or icons in a toolbar.

The Web Content Accessibility Guidelines (WCAG) 2.2, the international standard for accessible websites, require in success criterion 2.5.8 at level AA that targets for clicks or taps are at least 24 by 24 CSS pixels. Smaller targets are allowed if there is enough space around them: an imaginary circle with a 24-pixel diameter centered on each target must not touch another target or another such circle. In other words, spacing can make up for missing size.

Platform guidelines often go further. Even its first guidelines had Material Design recommending touch targets of at least 48 by 48dp, once again a multiple of 8. Why larger, easy-to-reach targets are faster to hit is explained by Fitts’ Law in the glossary.

From Design to Code

In code you’ll find the terms from this article almost one to one. CSS has the properties padding, margin and gap, the last one for spacing between elements in flexbox and grid layouts. CSS Grid lets you build column grids directly, for example with grid-template-columns: repeat(12, 1fr) for twelve columns of equal width.

Many teams define their spacing scale as CSS variables, such as --space-2: 8px or --space-6: 24px. When design and development use the same scale, questions like “Is this 22 or 24 pixels?” almost disappear. It works best when you agree on the scale together before the first screen, instead of measuring it out of finished designs afterward.

Common Beginner Mistakes

A few patterns show up especially often with beginners. Once you know them, you’ll spot them faster in your own designs.

Everything Equally Far Apart

If you use 16 pixels everywhere, you have a system but no groups. Label, field, next label and next section are all equally far apart, and nothing visibly belongs together. Use several steps of your scale on purpose so the law of proximity can do its job.

Fear of Empty Space

The urge to fill every free area with another element is understandable but rarely helpful. A hero section with a heading, one sentence and a button looks clearer with generous whitespace than with extra badges, icons and bullet points. When an area feels empty, the fix is often better spacing, not another element.

Aligning by Numbers Alone

Numbers are a good starting point, but your eye has the final say. A round icon often looks slightly too small next to text, and a button with equal padding at top and bottom can look a little off-center because capital letters have no descenders. This is where you can use a half step from the 4 scale. The system is there to take decisions off your plate, not to replace your eye.

A Grid Only on Desktop

A clean 12-column grid on desktop doesn’t help much if the mobile view is designed without one. Set up a grid for every screen size you design for and check how elements behave from one size to the next.

Conclusion

Spacing and grids are among the basics that get noticed least and achieve the most. Whitespace structures content and shows what belongs together. The 8-point system gives you a small set of allowed values, so designs become consistent and handoff to development gets easier. Layout grids create shared edges and with them a sense of calm on the page.

You don’t have to introduce everything at once. A good start is a spacing scale with six to eight values and the rule that spacing within a group is smaller than spacing between groups. The grid comes in once you design whole pages. After your first project with a clear scale, you’ll notice how much faster you make decisions.

Checklist

• Define a spacing scale based on 8, with 4 as a half step for fine details.
• Keep spacing within a group smaller than spacing between groups.
• Make micro and macro whitespace clearly different.
• Match the padding of buttons and cards to their size.
• Set up a layout grid for each screen size, such as 4, 8 and 12 columns.
• Align content to column edges and don’t let it end in a gutter.
• Set the big nudge in Figma to 8 and define spacing with auto layout.
• Make click targets at least 24 by 24 pixels or give them enough space around them.
• Document the scale and share it with development as common values.

Sources

• Material Design (version 1): Metrics & keylines
• Material Design (version 1): Responsive UI
• Android Developers: Grids and units
• Laws of UX: Law of Proximity
• Figma Help Center: Create layout guides
• Figma Help Center: Use the grid auto layout flow
• Figma Help Center: Set small and big nudge values
• Bootstrap: Grid system
• W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)
• MDN Web Docs: gap (CSS)