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="grid-overview pc-grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div><style> .grid-overview div:empty { min-inline-size: 100%; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>
Clusters are great for inline lists and aligning items of varying sizes.
<div class="pc-grid"> <div class="pc-stack pc-gap-m"> <div class="pc-frame pc-border-radius-l"> <img src="https://placer-toolkit.vercel.app/images/tulip.webp" alt="" /> </div> <h3 class="pc-heading-s">Tulip</h3> <em>Tulipa gesneriana</em> </div> <div class="pc-stack pc-gap-m"> <div class="pc-frame pc-border-radius-l"> <img src="https://placer-toolkit.vercel.app/images/peony.webp" alt="" /> </div> <h3 class="pc-heading-s">Peony</h3> <em>Paeonia officinalis</em> </div> <div class="pc-stack pc-gap-m"> <div class="pc-frame pc-border-radius-l"> <img src="https://placer-toolkit.vercel.app/images/poppy.webp" alt="" /> </div> <h3 class="pc-heading-s">Poppy</h3> <em>Papaver rhoeas</em> </div> <div class="pc-stack pc-gap-m"> <div class="pc-frame pc-border-radius-l"> <img src="https://placer-toolkit.vercel.app/images/sunflower.webp" alt="" /> </div> <h3 class="pc-heading-s">Sunflower</h3> <em>Helianthus annuus</em> </div> <div class="pc-stack pc-gap-m"> <div class="pc-frame pc-border-radius-l"> <img src="https://placer-toolkit.vercel.app/images/daisy.webp" alt="" /> </div> <h3 class="pc-heading-s">Daisy</h3> <em>Bellis perennis</em> </div></div>
<div class="pc-grid" style="--min-column-size: 30ch"> <pc-card> <div class="pc-flank"> <pc-avatar shape="rounded"> <pc-icon library="default" icon-style="solid" name="globe" slot="icon" ></pc-icon> </pc-avatar> <div class="pc-stack pc-gap-s"> <span class="pc-caption-s">Population (Germany)</span> <span class="pc-cluster pc-gap-s"> <span class="pc-heading-l">83 700 000</span> <pc-badge appearance="danger"> − 0,2 % <pc-icon library="default" icon-style="solid" name="arrow-trend-down"></pc-icon> </pc-badge> </span> </div> </div> </pc-card> <pc-card> <div class="pc-flank"> <pc-avatar shape="rounded"> <pc-icon library="default" icon-style="solid" name="language" slot="icon" ></pc-icon> </pc-avatar> <div class="pc-stack pc-gap-s"> <span class="pc-caption-s">Official language</span> <span class="pc-heading-l">German</span> </div> </div> </pc-card> <pc-card> <div class="pc-flank"> <pc-avatar shape="rounded"> <pc-icon library="default" icon-style="solid" name="landmark" slot="icon" ></pc-icon> </pc-avatar> <div class="pc-stack pc-gap-s"> <span class="pc-caption-s">Capital city</span> <span class="pc-heading-l">Berlin</span> </div> </div> </pc-card> <pc-card> <div class="pc-flank"> <pc-avatar shape="rounded"> <pc-icon library="default" icon-style="solid" name="coins" slot="icon" ></pc-icon> </pc-avatar> <div class="pc-stack pc-gap-s"> <span class="pc-caption-s">Currency</span> <span class="pc-heading-l">Euro (€)</span> </div> </div> </pc-card></div><style> pc-badge > pc-icon { color: color-mix(in oklab, currentColor, transparent 40%); }</style>
By default, grid items will wrap when the grid’s column size is less than 20ch, but you can set a custom minimum column size using the --min-column-size property.
<div class="grid-sizing pc-stack"> <div class="pc-grid" style="--min-column-size: 250px"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="pc-grid" style="--min-column-size: 7rem"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></div><style> .grid-sizing > [class*="pc-grid"]: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); } .grid-sizing div:empty { min-inline-size: 100%; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>
By default, the gap between grid items uses --pc-spacing-m from your theme. You can add any of the following pc-gap-* classes to an element with pc-grid 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
<div class="grid-gap pc-stack"> <div class="pc-grid pc-gap-xs"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="pc-grid pc-gap-xxl"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></div><style> .grid-gap > [class*="pc-grid"]: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); } .grid-gap div:empty { min-inline-size: 100%; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>
You can add the pc-span-grid class to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.
<div class="grid-span-grid pc-grid"> <div></div> <div></div> <div class="pc-span-grid"></div> <div></div> <div></div></div><style> .grid-span-grid div:empty { min-inline-size: 100%; min-block-size: 4rem; background-color: var(--pc-color-indigo-60); border-radius: var(--pc-border-radius-m); }</style>