Skip to table of contents 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>