Use the pc-grid class to create a responsive grid with even spacing, allowing the number of columns to adjust when space is limited.
<div class="split-overview pc-split"> <div></div> <div></div></div><style> .split-overview div:empty { min-inline-size: 4rem; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>
Splits are especially useful for navigation, header and footer layouts.
<div class="split-navigation pc-flank"> <div class="pc-split:column"> <div class="pc-stack"> <pc-button variant="plain"> <pc-icon library="default" icon-style="solid" name="house" label="Home" ></pc-icon> </pc-button> <pc-button variant="plain"> <pc-icon library="default" icon-style="solid" name="calendar" label="Calendar" ></pc-icon> </pc-button> <pc-button variant="plain"> <pc-icon library="default" icon-style="solid" name="envelope" label="Mail" ></pc-icon> </pc-button> </div> <div class="pc-stack"> <pc-divider></pc-divider> <pc-button variant="plain"> <pc-icon library="default" icon-style="solid" name="right-from-bracket" label="Sign out" ></pc-icon> </pc-button> </div> </div> <div class="placeholder"></div></div><style> .split-navigation pc-button::part(base) { justify-content: flex-start; text-align: start; } .split-navigation .placeholder { min-block-size: 300px; background-color: var(--pc-color-neutral-fill-quiet); border: var(--pc-border-width-s) dashed var(--pc-color-neutral-border-normal); border-radius: var(--pc-border-radius-l); }</style>
<div class="pc-stack"> <div class="pc-split"> <pc-icon src="https://placer-toolkit.vercel.app/brand/logo.svg" label="Placer Toolkit" style="font-size: var(--pc-font-size-xxl)" ></pc-icon> <div class="pc-cluster"> <pc-button appearance="primary">Sign up</pc-button> <pc-button variant="outlined">Log in</pc-button> </div> </div> <div class="placeholder"></div></div><style> .placeholder { min-block-size: 300px; background-color: var(--pc-color-neutral-fill-quiet); border: var(--pc-border-width-s) dashed var(--pc-color-neutral-border-normal); border-radius: var(--pc-border-radius-l); }</style>
Items can be split across a row or a column by appending :row or :column to the pc-split class.
<div class="split-direction pc-flank pc-align-items-start" style="block-size: 16rem"> <div class="pc-split:column"> <div></div> <div></div> </div> <div class="pc-split:row"> <div></div> <div></div> </div></div><style> .split-direction > [class*="pc-split"]:has(div:empty) { padding: var(--pc-spacing-s); border: var(--pc-border-width-s) dashed var(--pc-color-neutral-border-normal); border-radius: var(--pc-border-radius-l); } .split-direction div:empty { min-inline-size: 4rem; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>
By default, items are centred on the cross axis of the pc-split container. You can add any of the following pc-align-items-* classes to an element with pc-split to specify how items are aligned:
pc-align-items-startpc-align-items-endpc-align-items-centerpc-align-items-stretchpc-align-items-baseline
These modifiers specify how items are aligned in the block direction for pc-split:row and in the inline direction for pc-split:column.
<div class="split-align-items pc-stack"> <div class="pc-split pc-align-items-start" style="min-block-size: 8rem"> <div></div> <div></div> </div> <div class="pc-split pc-align-items-end" style="min-block-size: 8rem"> <div></div> <div></div> </div> <div class="pc-split pc-align-items-center" style="min-block-size: 8rem"> <div></div> <div></div> </div> <div class="pc-split pc-align-items-stretch" style="min-block-size: 8rem"> <div></div> <div></div> </div></div><style> .split-align-items > [class*="pc-split"]:has(div:empty) { padding: var(--pc-spacing-s); border: var(--pc-border-width-s) dashed var(--pc-color-neutral-border-normal); border-radius: var(--pc-border-radius-l); } .split-align-items div:empty { min-inline-size: 4rem; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>
A split’s gap determines how close items can be before they wrap. By default, the gap between split items uses --pc-spacing-m from your theme. You can add any of the following pc-gap-* classes to an element with pc-split to specify the gap between items.
pc-gap-0pc-gap-xxxspc-gap-xxspc-gap-xspc-gap-spc-gap-mpc-gap-lpc-gap-xlpc-gap-xxlpc-gap-xxxlpc-gap-xxxxlpc-gap-xxxxxl
To see it in action, use the resize handle on the code demo to resize the demo’s viewport.
<div class="split-gap pc-stack"> <div class="pc-split pc-gap-xs"> <div></div> <div></div> </div> <div class="pc-split pc-gap-xxl"> <div></div> <div></div> </div></div><style> .split-gap > [class*="pc-split"]:has(div:empty) { padding: var(--pc-spacing-s); border: var(--pc-border-width-s) dashed var(--pc-color-neutral-border-normal); border-radius: var(--pc-border-radius-l); } .split-gap div:empty { min-inline-size: 4rem; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>