MUI Grid Explained with Real Examples: Layouts, Forms, and Dashboards

Material UI (MUI) offers a powerful Grid component system for building responsive layouts in React. But it can be confusing at first — especially with the overlap between the Grid used for layout and the DataGrid used for data display. In this article, we’ll walk through how to use the MUI Grid system effectively, with real examples you can apply to forms, dashboards, and more.

What Is the MUI Grid?

MUI provides two types of grid components:

• Grid (Layout) from @mui/material or @mui/system: used to create page layouts using a 12-column flexbox system.
• Data Grid from @mui/x-data-grid: used for rendering tables, often with pagination, sorting, filtering, etc.

Knowing when to use which is key:

• Use Grid to control layout and positioning.
• Use DataGrid when you’re displaying structured data like tables.

Basic Layout with MUI Grid

Container vs. Item

MUI Grid uses a container + item model:

<Grid container spacing={2}>
  <Grid item xs={6}>Left</Grid>
  <Grid item xs={6}>Right</Grid>
</Grid>

How Columns Work

The grid divides the width into 12 columns. xs={6} takes half, xs={4} takes a third, and so on.

Spacing and Gaps

Use spacing={n} on the container to add consistent padding between items.

Responsive Layouts with Grid

Breakpoints

Grid supports breakpoints with xs, sm, md, lg, xl.

<Grid item xs={12} sm={6} md={4}>
  Responsive box
</Grid>

This box takes full width on small screens, half on medium, and a third on large screens.

Nested Grids

Grids can be nested by making an item also a container:

<Grid item xs={12}>
  <Grid container spacing={1}>
    <Grid item xs={6}>Nested A</Grid>
    <Grid item xs={6}>Nested B</Grid>
  </Grid>
</Grid>

Real UI Patterns

Form Layout

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField label="First Name" fullWidth />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField label="Last Name" fullWidth />
  </Grid>
</Grid>

Dashboard Cards

<Grid container spacing={2}>
  <Grid item xs={12} md={4}>
    <Paper>Stats Card</Paper>
  </Grid>
  <Grid item xs={12} md={8}>
    <Paper>Chart Area</Paper>
  </Grid>
</Grid>

Sidebar + Content

<Grid container>
  <Grid item xs={12} md={3}>
    <Sidebar />
  </Grid>
  <Grid item xs={12} md={9}>
    <MainContent />
  </Grid>
</Grid>

MUI Grid vs Data Grid

Feature Grid (@mui/material) DataGrid (@mui/x-data-grid) Purpose Page layout Tabular data display Column count 12-column system Columns defined per data column Use case Forms, dashboards, layouts Tables, spreadsheets, reports Breakpoints Yes No (handled via container resizing)

Example DataGrid usage:

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
];

const rows = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

<DataGrid rows={rows} columns={columns} autoHeight />

Common Pitfalls and Fixes

1. Overflow or Alignment Issues

• Always wrap items in a container.
• Ensure xs, sm, etc. values sum to 12 (or less).

2. Unwanted Scrollbars

• Use spacing={2} instead of manual margin or padding.

3. Grid Items Stretching Unexpectedly

• Wrap text in Box, Paper, or similar to control width/height.

Conclusion

MUI’s Grid system offers a powerful way to build responsive layouts using a simple, flexible API. By mastering container/item structure, breakpoints, and common layout patterns, you can build robust UIs without needing custom CSS.

FAQs