Standard MUI Grid (12-Column)
Traditional Material-UI Grid with 12-column layout using breakpoints and spacing.
Full width - Grid size=12
Normal content width - Grid size=10
Left Half - Grid size=6
Right Half - Grid size=6
One-third - Grid size=4
One-third - Grid size=4
One-third - Grid size=4
Fluid Grid System (Content-Aware)
Fluid Grid with content-aware layout based on CSS Grid and custom properties for dynamic column spans and gaps.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Try It Out: Dynamic Layouts with Fluid Grid
Use the input below to change the layout pattern for the Fluid Grid demo. Try values like "1/4", "6", "1/3 2/3", or "6 6" to see how the grid adapts.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
justifyContent Explorer
Controls how children are positioned within a row when there are unused columns. Try layouts that leave leftover columns (e.g. "5", "9", "8 3") or adjust the item count to produce partial last rows.
Item 1
Item 2
Item 3
Item 4
Item 5
gap Explorer
The gap prop overrides the theme's --space-gap CSS variable, which also drives column-width calculations — so column sizes and the gap between them always stay in sync. Accepts a CSS string, a number (theme.spacing units), or false/0 to remove all gaps.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Bleed Explorer
The bleed prop extends edge-touching children into the viewport margin. Change the layout and bleed value to see how each item's gridColumn shifts. The dark band makes the full viewport width visible so bleed to either edge is obvious.
First (left edge)
Middle
Last (right edge)
Responsive Bleed
Pass a breakpoint object to bleed for mobile-first control. Below md items stay within content bounds; at md and above both edge items extend to the viewport edge.
Left — bleeds left at md+
Right — bleeds right at md+
Collapsepoint Explorer
collapsepoint sets the breakpoint where a string layout activates. Below this point all children stack full-width (mobile-first default). Resize the window and change the collapsepoint to see exactly when the grid kicks in.
Column A
Column B
Column C
Semantic Container & Wrapper Skip
When all top-level children share the same intrinsic element type, Fluid skips the extra wrapper and infers the container automatically. These <li> children render directly inside a <ul> grid — inspect the DOM to confirm there are no extra wrapper divs.
- Item A
- Item B
- Item C
Mixed Children — Wrapping Fallback
When children are not all the same element type, the wrapper-skip is bypassed and each child is wrapped in the component element (default <div>). This is the standard mode for heterogeneous children.
<p> child