Skip to content
Responsive UI
Edit this page

Responsive UI

Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

Responsive layouts in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive:

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