# Responsive UI

<p class="description">Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.</p>

[Responsive layouts](https://material.io/design/layout/responsive-layout-grid.html) in Material Design adapt to any possible screen size.
We provide the following helpers to make the UI responsive:

- [Grid](/components/grid/): The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
- [Container](/components/container/): The container centers your content horizontally. It's the most basic layout element.
- [Breakpoints](/customization/breakpoints/): API that enables the use of breakpoints in a wide variety of contexts.
- [useMediaQuery](/components/use-media-query/): This is a CSS media query hook for React. It listens for matches to a CSS media query.
- [Hidden](/components/hidden/):
Quickly and responsively toggle the visibility value of components and more with our hidden utilities.