Grid component
A responsive 12-column CSS Grid component with mobile-first breakpoints and automatic intermediate breakpoint filling for smooth responsive transitions.
Key features
Auto-responsive
Automatically fills in missing intermediate breakpoints to prevent jarring layout jumps. Enabled by default.
Mobile-first
Uses xs as the base breakpoint, with sm/md/lg/xl overriding at larger screens. Forms are always usable on mobile.
Preflight protected
BLOCKING preflight check ensures all Grid items have proper responsive breakpoints. Runs on every build.
Basic usage
Note
TheautoResponsive prop is enabled by default. Grid items with xs=12 and md≤4 automatically get sm=6 added.// Auto-responsive (default) - smooth 1 → 2 → 4 column transition
<Grid container spacing={3}>
<Grid xs={12} md={3}>
<TextField label="Field 1" fullWidth
slotProps={{ inputLabel: { shrink: true } }}
/>
</Grid>
<Grid xs={12} md={3}>
<TextField label="Field 2" fullWidth
slotProps={{ inputLabel: { shrink: true } }}
/>
</Grid>
<Grid xs={12} md={3}>
<TextField label="Field 3" fullWidth
slotProps={{ inputLabel: { shrink: true } }}
/>
</Grid>
<Grid xs={12} md={3}>
<TextField label="Field 4" fullWidth
slotProps={{ inputLabel: { shrink: true } }}
/>
</Grid>
</Grid>
// Equivalent to (auto-filled sm={6}):
<Grid xs={12} sm={6} md={3}>...</Grid>