Masonry Props
Props specific to the lightweight Masonry component.
Masonry accepts all Common Props plus these
props.
| Prop | Type | Default | Notes |
|---|---|---|---|
enableNative | boolean | false | Progressively enables CSS Grid Lanes after hydration when supported. |
onLayoutModeChange | (mode: MasonryLayoutMode) => void | - | Reports whether native or fallback layout is active. |
columnClassName | string | - | Class applied to each internal column wrapper in fallback layout. |
Native CSS masonry
<Masonry
enableNative
items={items}
columns={3}
gap={16}
render={({ data }) => <Card item={data} />}
/>enableNative is progressive and opt-in. Masonix detects the standardized
display: grid-lanes syntax after
hydration. Browsers without support continue using the regular flex layout.
Native mode preserves the same fixed track width passed to each renderer.
Use onLayoutModeChange when the interface needs to show which engine is
active. The container also exposes the active mode through
data-masonix-layout="native" or data-masonix-layout="fallback".
<Masonry
enableNative
onLayoutModeChange={(mode) => setLayoutMode(mode)}
items={items}
render={({ data }) => <Card item={data} />}
/>Because browser support is still limited, do not depend on native mode for layout correctness. Treat it as an enhancement and test it in every browser you support.
Column classes
<Masonry
items={items}
columns={3}
columnClassName="space-y-4"
render={({ data }) => <Card item={data} />}
/>Use columnClassName for column-level styling only. Use itemClassName or the
card component for item styling.