SGrid `<s-grid>`

import { SGrid } from 'polaris-vue-elements'

Example

Column 1

Column 2

Column 1

Column 2

vue

<script setup>
import { SGrid, SGridItem, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</template>

Props

Prop	Type	Description
`accessibilityLabel`	`string`	A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies.
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
`accessibilityVisibility`	`"visible" \| "hidden" \| "exclusive"`	Changes the visibility of the element. - `visible`: the element is visible to all users. - `hidden`: the element is removed from the accessibility tree but remains visible. - `exclusive`: the element is visually hidden but remains in the accessibility tree.
`alignContent`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (9 more)`	Aligns the grid along the block axis. This overrides the block value of `placeContent`.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Aligns the grid items along the block axis.
`background`	`"subdued" \| "base" \| "strong" \| "transparent"`	Adjust the background of the component.
`blockSize`	`"auto" \| "0"`	Adjust the block size.
`border`	`BorderShorthand`	Set the border via the shorthand property. This can be a size, optionally followed by a color, optionally followed by a style. If the color is not specified, it will be `base`. If the style is not specified, it will be `auto`. Values can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.
`borderColor`	`"subdued" \| "base" \| "strong"`	Adjust the color of the border.
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	Adjust the radius of the border.
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	Adjust the style of the border.
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small" \| "small-100" \| "large" \| "large-100" \| "none">`	Adjust the width of the border.
`columnGap`	`"base" \| "small" \| "small-500" \| "small-400" \| "small-300" \| "small-200" \| "small-100" \| "large" … (6 more)`	Adjust spacing between elements in the inline axis. This overrides the column value of `gap`. `columnGap` either accepts: - a single SpacingKeyword value (e.g. `large-100`) - OR a responsive value string with the supported SpacingKeyword as a query value.
`display`	`"auto" \| "none"`	Sets the outer display type of the component. The outer type sets a component's participation in flow layout. - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
`gap`	`MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>`	Adjust spacing between elements. `gap` can either accept: - a single SpacingKeyword value applied to both axes (e.g. `large-100`) - OR a pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively - OR a responsive value string with the supported SpacingKeyword as a query value.
`gridTemplateColumns`	`string`	Define columns and specify their size. `gridTemplateColumns` either accepts: - track sizing values (e.g. `1fr auto`) - OR responsive values string with the supported track sizing values as a query value.
`gridTemplateRows`	`string`	Define rows and specify their size. `gridTemplateRows` either accepts: - track sizing values (e.g. `1fr auto`) - OR responsive values string with the supported track sizing values as a query value.
`inlineSize`	`"auto" \| "0"`	Adjust the inline size.
`justifyContent`	`"normal" \| "stretch" \| "center" \| "start" \| "end" \| "unsafe center" \| "unsafe start" \| "unsafe end" … (6 more)`	Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.
`justifyItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Aligns the grid items along the inline axis.
`maxBlockSize`	`"none" \| "0"`	Adjust the maximum block size.
`maxInlineSize`	`"none" \| "0"`	Adjust the maximum inline size.
`minBlockSize`	`"0"`	Adjust the minimum block size.
`minInlineSize`	`"0"`	Adjust the minimum inline size.
`overflow`	`"visible" \| "hidden"`	Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible.
`padding`	`MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>`	Adjust the padding of all edges. 1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: - 4 values: `block-start inline-end block-end inline-start` - 3 values: `block-start inline block-end` - 2 values: `block inline` For example: - `large` means block-start, inline-end, block-end and inline-start paddings are `large`. - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`. - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`. - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`. A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed. `padding` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`paddingBlock`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	Adjust the block-padding. - `large none` means block-start padding is `large`, block-end padding is `none`. This overrides the block value of `padding`. `paddingBlock` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`paddingBlockEnd`	`"base" \| "small" \| "small-500" \| "small-400" \| "small-300" \| "small-200" \| "small-100" \| "large" … (6 more)`	Adjust the block-end padding. This overrides the block-end value of `paddingBlock`. `paddingBlockEnd` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`paddingBlockStart`	`"base" \| "small" \| "small-500" \| "small-400" \| "small-300" \| "small-200" \| "small-100" \| "large" … (6 more)`	Adjust the block-start padding. This overrides the block-start value of `paddingBlock`. `paddingBlockStart` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`paddingInline`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	Adjust the inline padding. - `large none` means inline-start padding is `large`, inline-end padding is `none`. This overrides the inline value of `padding`. `paddingInline` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`paddingInlineEnd`	`"base" \| "small" \| "small-500" \| "small-400" \| "small-300" \| "small-200" \| "small-100" \| "large" … (6 more)`	Adjust the inline-end padding. This overrides the inline-end value of `paddingInline`. `paddingInlineEnd` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`paddingInlineStart`	`"base" \| "small" \| "small-500" \| "small-400" \| "small-300" \| "small-200" \| "small-100" \| "large" … (6 more)`	Adjust the inline-start padding. This overrides the inline-start value of `paddingInline`. `paddingInlineStart` also accepts a responsive value string with the supported PaddingKeyword as a query value.
`placeContent`	`"normal normal" \| "normal stretch" \| "normal center" \| "normal start" \| "normal end" \| "normal unsafe center" \| "normal unsafe start" \| "normal unsafe end" … (3 more)`	A shorthand property for `justify-content` and `align-content`.
`placeItems`	`AlignItemsKeyword \| "normal normal" \| "normal stretch" \| "normal baseline" \| "normal first baseline" \| "normal last baseline" \| "normal center" \| "normal start" … (2 more)`	A shorthand property for `justify-items` and `align-items`.
`rowGap`	`"base" \| "small" \| "small-500" \| "small-400" \| "small-300" \| "small-200" \| "small-100" \| "large" … (6 more)`	Adjust spacing between elements in the block axis. This overrides the row value of `gap`. `rowGap` either accepts: - a single SpacingKeyword value (e.g. `large-100`) - OR a responsive value string with the supported SpacingKeyword as a query value.

Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (src/lib/generated/types.ts).

Slots

Slot	Description
`default`	The content of the Grid.

SGrid <s-grid> ​

Example ​

Props ​

Slots ​

SGrid `<s-grid>`

Example

Props

Slots