Grid

Grid layout container. Wraps the Polaris <s-grid> web component.

Usage

<template>
  <ShGrid grid-template-columns="1fr 1fr" gap="base">
    <ShGridItem>Column 1</ShGridItem>
    <ShGridItem>Column 2</ShGridItem>
  </ShGrid>
</template>

Props

Includes all Box props plus:

Prop	Type	Default	Description
`gridTemplateColumns`	`string`	—	Grid template columns
`gridTemplateRows`	`string`	—	Grid template rows
`justifyItems`	`string`	—	Justify items
`alignItems`	`string`	—	Align items
`placeItems`	`string`	—	Place items shorthand
`justifyContent`	`string`	—	Justify content
`alignContent`	`string`	—	Align content
`placeContent`	`string`	—	Place content shorthand
`gap`	`string`	—	Gap between items
`rowGap`	`string`	—	Row gap
`columnGap`	`string`	—	Column gap

Slots

Slot	Description
`default`	Grid children

Polaris Element

Renders as <s-grid>. See Polaris Grid docs.

Edit this pageorReport an issue

Stack

Stack layout for vertical or horizontal arrangement. Wraps the Polaris <s-stack> web component.

GridItem

Grid item within a Grid. Wraps the Polaris <s-grid-item> web component.