---
url: /foundations/layout/grids-spacing/spacing.md
description: Grids and spacing organize content and actions for any layout
---

# Grids & spacing

Grids and spacing organize content and actions for any layout

[Overview](overview.md) · [Grids](grids.md) · **Spacing** · [Density](density.md)

* Spacing helps group content, direct attention, and shape the personality of a product
* A denser layout can feel more serious and focused, while a more spacious layout can feel calm and open
* Material’s spacing system can adapt to [breakpoints](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") and density settings. [More on the spacing system](../../../styles/spacing/overview.md)

![2 screens: 1 mobile with tight spacing, 1 desktop with wider spacing.](/assets/58baa406-mp51ef8p-01.DAXxRVZW.webp)

Desktop layouts can use more generous spacing than mobile layouts

<a id="e7e6d1ac-031a-4757-afcf-b223f23654ea"></a>

## Spacing to group content

Grouping connects related elements that share context, such as an image and its caption. Use spacing to visually tie elements together and establish boundaries between unrelated items.

![Photo of dumplings with a caption reading “restaurants in the area”.](/assets/15d23e3c-mp51khdt-02.Ky7qDC-Z.webp)

Placing a caption under an image creates an implicit group

**Explicit grouping** uses visual boundaries like outlines, dividers, and shadows to group related elements in an enclosed area.

It can also indicate that an item is interactive, such as:

* List items between dividers
* A card displaying an image and its caption

![A contact grouped in an outlined card with a photo and caption.](/assets/ecc8ed0f-mp5334mv-03.DqicQFjY.webp)

Outlines define clear boundaries to explicitly group elements

**Implicit grouping** uses close proximity and open space (rather than lines and shadows) to group related items.

For example, the items in a carousel are placed close together, with space around the composition to separate them from other content.

![Carousel of food-related photos.](/assets/9b661107-mp5346br-04.JOUoT7AR.webp)

Close spacing implicitly groups carousel images

## Spacing to direct attention

Use rhythm, similarity, and other grouping principles to distinguish and highlight important elements.

### Rhythm

Consistent spacing between related elements or groups makes them easier to navigate with the eye.

![4 art courses in a row of cards with consistent horizontal spacing and different heights.](/assets/1b4befdd-mp53c1l8-05.D9jaqaX9.webp)

Cards should maintain consistent horizontal spacing to establish a strong rhythm when their height varies

### Similarity

Similar elements should have the same spacing and sizing in a layout to show they’re related.

Leading elements like thumbnails, avatars, or icons should always be aligned.

![3 shopping basket list items with the same thumbnail sizes and text styles.](/assets/3d6459ad-mp53g651-06.laa_hJyp.webp)

Thumbnails in a shopping basket should use identical sizes and styles to signal that each one represents a product, even if the original photos have different aspect ratios

### Proximity

Place components near each other to create cohesive groups. This helps people understand the relationships between information and actions.

For example, buttons should be close to the content they’re affecting.

![Email message with Reply and Reply all buttons positioned close together.](/assets/c4ccefca-mp71sefu-07.BDD310Zf.webp)

Placing two buttons as a group near content implies they’ll both affect it in similar ways

### Continuity

Place related elements in a container, row, or column to establish a clear group or relationship.

![Clothing product page with a horizontal row of size chips, with 6 selected.](/assets/0f912931-mp53i2w6-08.CVk6HRnl.webp)

Use a row of chips to signal a single, unified control

## Spacing as expression

Give the most important content, tasks, or actions visual prominence with generous spacing and the brightest surfaces.

### Focal points

Consistent placement of key actions and information helps build recognizable focal points across a product.

![2 mobile screens showing carousels with identical layouts and title placement.](/assets/f761d859-mp53roq5-09.qqkMe1S3.webp)

Carousel images, categories, and titles should appear in a consistent location across pages

### Negative space

Allow negative space to give form and meaning to elements on screen. Framing important actions or content with generous spacing creates emphasis.

![A mobile screen shows generous negative space around carousel images.](/assets/52745751-mp53ttu6-10.BXGzHFyG.webp)

Negative space gives shape and emphasis to the course header