Multi-column Layouts
Multi-column and other complex layouts can be achieved by nesting components.
Using DropZones
Puck provides support for nesting components via the <DropZone> API.
Nesting components
The <DropZone> component can be rendered anywhere within your component.
import { DropZone } from "@measured/puck";
const config = {
components: {
Example: {
render: () => {
return (
<div>
<DropZone zone="my-content" />
</div>
);
},
},
},
};Creating multi-column layouts
Combine multiple <DropZone> components with something like CSS Grid (opens in a new tab) or Flexbox (opens in a new tab) to achieve multi-column layouts.
import { DropZone } from "@measured/puck";
const config = {
components: {
Example: {
render: () => {
return (
<div
style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
>
<DropZone zone="left-column" />
<DropZone zone="right-column" />
</div>
);
},
},
},
};Reusing the zone
The zone identifier is unique to the component, and can be reused in different components.
import { DropZone } from "@measured/puck";
const Columns = () => (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<DropZone zone="left-column" />
<DropZone zone="right-column" />
</div>
);
const config = {
components: {
Example: {
render: () => {
return (
<div>
<Columns />
</div>
);
},
},
Alternative: {
render: () => {
return (
<div>
<Columns />
</div>
);
},
},
},
};