Material spacing and grid: what the scale really decides

The spacing scale answers a simple question: how much room goes between two things. It does this with a single base unit. Material Design measures the whole system on an 8dp scale where space100 equals 8dp, and that one number keeps padding, gaps, and margins comparable across screens. What the guide doesn’t settle is the layout itself. It hands over the scale and the grid, and it leaves the screen that needs extra air for an editorial reason to you. For that case, the way out is to record the exception as a token of your own.

What the spacing scale decides

The scale covers three distances and nothing else: padding inside an element, gaps between elements, and margins outside an element. Padding pushes content away from the edge of its container. A gap separates two elements sitting side by side or stacked. A margin holds an element away from its parent or from the screen edge. The guide puts padding and gaps ahead of margins, because a margin set on a child element is rarely uniform and costs more tokens to keep in line.

Direction is part of the system too. Spacing can be horizontal, vertical, or bound to one edge, and the guide names those edges leading, trailing, top, and bottom. Leading and trailing swap sides in right-to-left languages, so the rule works in both directions without a rewrite.

Grid, margin and gutter

A grid is columns, gutters, and margins, and the scale turns up first in the gutter. NN/g defines a grid as columns, gutters, and margins, with the gutter separating content in different columns. Column widths are usually percentages so they flex with the screen, while gutter widths are fixed values that change at breakpoints. NN/g adds one rule that decides whether the grid holds: keep content inside the columns and leave the gutters empty.

Material’s grid changes column count with the breakpoint, and the guide places rails and panes on it rather than on a fixed pixel map. The margin is the part with slack. Margin rulers, in the guide’s words, come with room to make a layout feel tighter or looser. The same page notes that a photo grid can run full width while a search field keeps a wider margin. The scale allows that choice, but you are the one who makes it.

The steps of the scale and what each one solves

Material defines a linear set of values and leaves the space between them empty on purpose. The token list runs from space0 to space900, with space100 at 8dp as the base unit. Small steps handle the parts inside a control, where 2dp, 4dp, 6dp, and 10dp appear as nested units for the tight pairs a multiple of eight can’t name. The middle covers the everyday work. The guide’s own example is a search container with 8dp vertical padding, 8dp horizontal gaps, and 24dp horizontal margins. The top of the range, up to space900 at 72dp, separates large blocks from each other.

The guide also says it defines only the most recommended values and expects a product to extend the scale when it needs more.

Density and what it costs the touch target

Density wins screen space, and the size of what people have to tap pays for it. The guide sets a floor that doesn’t move: the default target should be at least 48x48 CSS pixels, and a component shouldn’t scale below that by default. Component density runs as a numbered scale. It starts at 0 for the default and goes negative as space shrinks, and one step usually cuts 4dp from the top and bottom padding or the overall height.

Two places feel it the most. The guide says not to raise density in interfaces built around a focused task, such as choosing from a menu. It says the same about components that alert someone to a change, such as snackbars or dialogs. Density is opt-in besides: a person turns it on in settings, and those settings must keep the full target size so the choice can be reversed.

Spacing and token

A spacing token is a name that resolves to a value, so a decision is made once and reused. The guide builds the chain this way: component attributes map to system tokens, which resolve to final values. System tokens are what replace a hardcoded number. When the right token doesn’t exist, the guide says to add it by the multiplier pattern, so space225 equals 18dp, from 8dp times 2.25. That is the documented escape hatch, and it is the same move for the editorial layout that needs more air than the scale allows.

The guide also ties spacing to text scaling. At 200% text size, the same spacing should be kept by default, because a bigger label squeezed by a smaller gap is harder to read. NN/g reaches the same point from the other side, noting that an element with more space around it is read as one group and draws more attention.

The common mistake of a value off the scale

The most common mistake is a one-off number, picked for one screen and then copied to the rest. A padding of 13px or a gap of 15px sits outside the scale, so it never becomes a token, and the next screen invents its own value nearby. NN/g saw the pattern in form design: when the spacing between a label and its field is off, people hesitate over what to type. The eye reads nearness as relationship, and a value the scale doesn’t recognize breaks that reading without a warning.

What to measure

Three checks cover most of it. The touch target first, at 48x48 CSS pixels, because it is the one number with an accessibility floor behind it. Alignment between blocks second, since the eye notices a block that sits off the line faster than a spacing value a few pixels small. Breathing room on a small screen comes third, and here the guide says plainly that the amount of air is a decision, not a default. NN/g makes the cost plain: it calls optimizing the interface for the available screen space a key strategy for usability, and warns against cramming information into tiny peepholes.

The scale pays off when the same amount of space means the same thing across screens, and the grid pays off when columns carry the content and gutters stay clear. Neither replaces a decision about the layout in front of you. When a screen needs more air than the scale allows, name the exception in its own token instead of dropping a number into one file.

The steps here extend the post on Material Design, the post on Material typography, the post on Material tokens and theming, and the post on dense data products.