---
url: /foundations/layout/grids-spacing/overview.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** · [Grids](grids.md) · [Spacing](spacing.md) · [Density](density.md)

![Grids & spacing](/assets/acd43809-mrodw83s-understanding-layout.Fo-wBEgJ.webp)

* Grids create a consistent foundation and adapt across [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).") (previously window size classes)
* Use spacing to group related information and direct people’s attention to key actions
* Density helps people see and compare more information in data-heavy views

![Mobile and desktop UIs with grid lines.](/assets/089d663f-mp4if1f9-01.CYsadJiH.webp)

Layouts in Material are based on a grid that adapts across all screen sizes

## Availability & resources

| Type           | Resource                                                                                                   | Status    |
| -------------- | ---------------------------------------------------------------------------------------------------------- | --------- |
| Design         | [M3 Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460)                          | Available |
| Design         | [Spacing system & tokens](../../../styles/spacing/overview.md)                                             | Available |
| Implementation | [Jetpack Compose: Rulers](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Ruler) | Available |

## What’s new

##### **May 2026**

* How to use grids and rulers to adapt layouts across devices
* Expressive spacing guidelines

![Tablet with content divided into 8 columns. Each pane of content is 4 columns wide.](/assets/1c843eac-mp4int8e-02.BrCvskiP.webp)

As screen size increases, additional columns allow for a richer layout