SGrid <s-grid>

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

Example

Column 1Column 2Column 1Column 2

<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" | "main" | "header" | "footer" | "section" | "region" | "aside" | "navigation" … (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"	The background color of the component.
blockSize	"auto" | "0"	The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about block-size.
border	BorderShorthand	A border applied using shorthand syntax to specify width, color, and style in a single property.
borderColor	"subdued" | "base" | "strong"	The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property. Choose from subdued, base, or strong to match the visual emphasis needed.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	The roundedness of the element's corners using the design system's radius scale. Supports 1-to-4-value syntax for specifying different radii per corner. Use this to create rounded corners or fully rounded elements.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the border property. Supports 1-to-4-value syntax for specifying different styles per side.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	The thickness of the border on all sides. When set, this overrides the width value specified in the border property. Supports 1-to-4-value syntax for specifying different widths per side.
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	Adjusts spacing between elements in the inline axis. This overrides the column value of gap. Accepts: - A single SpacingKeyword value, such as large-100 - A responsive value string with the supported SpacingKeyword as a query value
display	"auto" | "none"	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>>	Adjusts spacing between elements. Accepts: - A single SpacingKeyword value applied to both axes, such as large-100 - A pair of values, such as large-100 large-500, to set the inline and block axes respectively - A responsive value string with the supported SpacingKeyword as a query value
gridTemplateColumns	string	The columns in the grid and their sizes. Accepts: - Track sizing values, such as 1fr auto - A responsive value string with the supported track sizing values as a query value
gridTemplateRows	string	The rows in the grid and their sizes. Accepts: - Track sizing values, such as 1fr auto - A responsive value string with the supported track sizing values as a query value
inlineSize	"auto" | "0"	The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about 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"	The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about max-block-size.
maxInlineSize	"none" | "0"	The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about max-inline-size.
minBlockSize	"0"	The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about min-block-size.
minInlineSize	"0"	The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about min-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>>	The padding applied to all edges of the component. Supports 1-to-4-value syntax using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) Examples:* base, large none, base large-100 base small Use auto to inherit padding from the nearest container with removed padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. Example:* large none applies large to the top and none to the bottom. Overrides the block value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The block-start padding (top in horizontal writing modes). Overrides the block-start value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. Example:* large none applies large to the left and none to the right. Overrides the inline value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from paddingInline. 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-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	Adjusts spacing between elements in the block axis. This overrides the row value of gap. Accepts: - A single SpacingKeyword value, such as large-100 - 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 child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing.