Layout guidance

Responsiveness

Build component examples that remain usable on phones, tablets, and desktop screens without hiding critical actions. The library exposes responsive-friendly inputs and CSS hooks; your app decides which layout pattern fits the workflow.

What to use when

Pattern	Best for	Implementation note
Scrollable grid	Data-heavy tables where every column matters.	Set explicit column widths and allow horizontal scrolling inside the grid container.
Stacked layout	Mobile reading flows where rows are more important than columns.	Use the DataGrid stacked visual-design example for card-like row presentation.
Compact controls	Pagination, toolbar, and filtering controls on narrow screens.	Wrap controls, reduce gaps, and keep primary actions visible.
Priority columns	Dashboards where secondary metadata can be hidden on mobile.	Hide only non-critical fields and keep the detail route or row expansion available.

Recommended CSS hooks

/* Keep data tables usable on small screens. */
.docs-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .docs-grid-toolbar {
    display: grid;
    gap: .75rem;
  }

  .docs-grid-toolbar > * {
    width: 100%;
  }
}

Usage notes

Prefer scrolling or stacked layouts over truncating important data.
Keep filter inputs, pagination, and row actions reachable without horizontal page scrolling.
Use browser testing at common breakpoints: 390px, 768px, 1024px, and desktop width.
For DataGrid-specific examples, use the Visual Design and Columns pages for stacked, compact, sticky, and locked-column behavior.