---
title: Grid
description: Use `s-grid` to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/layout-and-structure/grid
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/layout-and-structure/grid.md
---

# Grid

Use `s-grid` to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).

## Properties

* **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**

  **AccessibilityRole**

  **Default: 'generic'**

  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'**

  **Default: 'visible'**

  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**

  **MaybeResponsive\<ReducedAlignContentKeyword | ''>**

  **Default: '' - meaning no override**

  Aligns the grid along the block (column) axis.

  This overrides the block value of `placeContent`.

* **alignItems**

  **MaybeResponsive\<ReducedAlignItemsKeyword | ''>**

  **Default: '' - meaning no override**

  Aligns the grid items along the block (column) axis.

  This overrides the block value of `placeItems`.

* **background**

  **'base' | 'subdued' | 'transparent'**

  **Default: 'transparent'**

  Adjust the background of the element.

* **blockSize**

  **MaybeResponsive\<SizeUnitsOrAuto>**

  **Default: 'auto'**

  Adjust the block size.

* **border**

  **BorderShorthand**

  **Default: 'none' - equivalent to \`none base auto\`.**

  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**

  **'' | 'base'**

  **Default: '' - meaning no override**

  Set the color of the border.

  If set, it takes precedence over the `border` property's color.

* **borderRadius**

  **MaybeAllValuesShorthandProperty\<Extract\<GridProps$1\['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>**

  **Default: 'none'**

  Set the radius of the border.

  [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:

  * 4 values: `start-start start-end end-end end-start`
  * 3 values: `start-start (start-end & end-start) start-end`
  * 2 values: `(start-start & end-end) (start-end & end-start)`

  For example:

  * `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.
  * `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.
  * `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.
  * `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.

* **borderStyle**

  **MaybeAllValuesShorthandProperty\<BorderStyleKeyword> | ""**

  **Default: '' - meaning no override**

  Set the style of the border.

  If set, it takes precedence over the `border` property's style.

  Like CSS, up to 4 values can be specified.

  If one value is specified, it applies to all sides.

  If two values are specified, they apply to the block sides and inline sides respectively.

  If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.

  If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

* **borderWidth**

  **MaybeAllValuesShorthandProperty\<ReducedBorderSizeKeyword> | ''**

  **Default: '' - meaning no override**

  Set the width of the border.

  If set, it takes precedence over the `border` property's width.

  Like CSS, up to 4 values can be specified.

  If one value is specified, it applies to all sides.

  If two values are specified, they apply to the block sides and inline sides respectively.

  If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.

  If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

* **columnGap**

  **MaybeResponsive\<SpacingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust spacing between elements in the inline axis.

  This overrides the column value of `gap`.

* **display**

  **MaybeResponsive<"auto" | "none">**

  **Default: 'auto'**

  Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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>>**

  **Default: 'none'**

  Adjust spacing between elements.

  A single value applies to both axes. A pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively.

* **gridTemplateColumns**

  **MaybeResponsive\<string>**

  **Default: 'none'**

  Define columns and specify their size.

* **gridTemplateRows**

  **MaybeResponsive\<string>**

  **Default: 'none'**

  Define rows and specify their size.

* **id**

  **string**

  A unique identifier for the element.

* **inlineSize**

  **MaybeResponsive\<SizeUnitsOrAuto>**

  **Default: 'auto'**

  Adjust the inline size.

* **justifyContent**

  **MaybeResponsive\<ReducedJustifyContentKeyword | ''>**

  **Default: '' - meaning no override**

  Aligns the grid along the inline (row) axis.

  This overrides the inline value of `placeContent`.

* **justifyItems**

  **MaybeResponsive\<ReducedJustifyItemsKeyword | ''>**

  **Default: '' - meaning no override**

  Aligns the grid items along the inline (row) axis.

  This overrides the inline value of `placeItems`.

* **maxBlockSize**

  **MaybeResponsive\<SizeUnitsOrNone>**

  **Default: 'none'**

  Adjust the maximum block size.

* **maxInlineSize**

  **MaybeResponsive\<SizeUnitsOrNone>**

  **Default: 'none'**

  Adjust the maximum inline size.

* **minBlockSize**

  **MaybeResponsive\<SizeUnits>**

  **Default: '0'**

  Adjust the minimum block size.

* **minInlineSize**

  **MaybeResponsive\<SizeUnits>**

  **Default: '0'**

  Adjust the minimum inline size.

* **overflow**

  **'hidden' | 'visible'**

  **Default: 'visible'**

  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>>**

  **Default: 'none'**

  Adjust the padding of all edges.

  [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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.

* **paddingBlock**

  **MaybeResponsive\<MaybeTwoValuesShorthandProperty\<PaddingKeyword> | "">**

  **Default: '' - meaning no override**

  Adjust the block-padding.

  * `large none` means block-start padding is `large`, block-end padding is `none`.

  This overrides the block value of `padding`.

* **paddingBlockEnd**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the block-end padding.

  This overrides the block-end value of `paddingBlock`.

* **paddingBlockStart**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the block-start padding.

  This overrides the block-start value of `paddingBlock`.

* **paddingInline**

  **MaybeResponsive\<MaybeTwoValuesShorthandProperty\<PaddingKeyword> | "">**

  **Default: '' - meaning no override**

  Adjust the inline padding.

  * `large none` means inline-start padding is `large`, inline-end padding is `none`.

  This overrides the inline value of `padding`.

* **paddingInlineEnd**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the inline-end padding.

  This overrides the inline-end value of `paddingInline`.

* **paddingInlineStart**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the inline-start padding.

  This overrides the inline-start value of `paddingInline`.

* **placeContent**

  **MaybeResponsive<\`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}\` | ReducedAlignContentKeyword>**

  **Default: 'normal normal'**

  A shorthand property for `justify-content` and `align-content`.

* **placeItems**

  **MaybeResponsive<\`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}\` | ReducedAlignItemsKeyword>**

  **Default: 'normal normal'**

  A shorthand property for `justify-items` and `align-items`.

* **rowGap**

  **MaybeResponsive\<SpacingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust spacing between elements in the block axis.

  This overrides the row value of `gap`.

### AccessibilityRole

```ts
"main" | "header" | "footer" | "section" | "aside" | "navigation" | "ordered-list" | "list-item" | "list-item-separator" | "unordered-list" | "separator" | "status" | "alert" | "generic" | "presentation" | "none"
```

### MaybeResponsive

```ts
T | `@container${string}`
```

### ReducedAlignContentKeyword

```ts
'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'
```

### ReducedAlignItemsKeyword

```ts
'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'
```

### SizeUnitsOrAuto

```ts
SizeUnits | "auto"
```

### SizeUnits

```ts
`${number}px` | `${number}%` | `0`
```

### BorderShorthand

```ts
ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`
```

### ReducedBorderSizeKeyword

```ts
'large' | 'base' | 'large-100' | 'large-200' | 'none'
```

### ReducedColorKeyword

```ts
'base'
```

### BorderStyleKeyword

```ts
"none" | "solid" | "dashed" | "dotted" | "auto"
```

### MaybeAllValuesShorthandProperty

```ts
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`
```

### GridProps

* accessibilityLabel

  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.

  ```ts
  string
  ```

* accessibilityRole

  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.

  ```ts
  AccessibilityRole
  ```

* accessibilityVisibility

  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.

  ```ts
  'visible' | 'hidden' | 'exclusive'
  ```

* alignContent

  Aligns the grid along the block (column) axis. This overrides the block value of \`placeContent\`.

  ```ts
  MaybeResponsive<ReducedAlignContentKeyword | ''>
  ```

* alignItems

  Aligns the grid items along the block (column) axis. This overrides the block value of \`placeItems\`.

  ```ts
  MaybeResponsive<ReducedAlignItemsKeyword | ''>
  ```

* background

  Adjust the background of the element.

  ```ts
  'base' | 'subdued' | 'transparent'
  ```

* blockSize

  Adjust the block size.

  ```ts
  MaybeResponsive<SizeUnitsOrAuto>
  ```

* border

  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\`.

  ```ts
  BorderShorthand
  ```

* borderColor

  Set the color of the border. If set, it takes precedence over the \`border\` property's color.

  ```ts
  '' | 'base'
  ```

* borderRadius

  Set the radius of the border. \[1-to-4-value syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: - 4 values: \`start-start start-end end-end end-start\` - 3 values: \`start-start (start-end & end-start) start-end\` - 2 values: \`(start-start & end-end) (start-end & end-start)\` For example: - \`small-100\` means start-start, start-end, end-end and end-start border radii are \`small-100\`. - \`small-100 none\` means start-start and end-end border radii are \`small-100\`, start-end and end-start border radii are \`none\`. - \`small-100 none large-100\` means start-start border radius is \`small-100\`, start-end border radius is \`none\`, end-end border radius is \`large-100\` and end-start border radius is \`none\`. - \`small-100 none large-100 small-100\` means start-start border radius is \`small-100\`, start-end border radius is \`none\`, end-end border radius is \`large-100\` and end-start border radius is \`small-100\`.

  ```ts
  MaybeAllValuesShorthandProperty<Extract<GridProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>
  ```

* borderStyle

  Set the style of the border. If set, it takes precedence over the \`border\` property's style. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

  ```ts
  MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""
  ```

* borderWidth

  Set the width of the border. If set, it takes precedence over the \`border\` property's width. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

  ```ts
  MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''
  ```

* columnGap

  Adjust spacing between elements in the inline axis. This overrides the column value of \`gap\`.

  ```ts
  MaybeResponsive<SpacingKeyword | "">
  ```

* display

  Sets the outer display type of the component. The outer type sets a component’s participation in \[flow layout]\(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_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.

  ```ts
  MaybeResponsive<"auto" | "none">
  ```

* gap

  Adjust spacing between elements. A single value applies to both axes. A pair of values (eg \`large-100 large-500\`) can be used to set the inline and block axes respectively.

  ```ts
  MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>
  ```

* gridTemplateColumns

  Define columns and specify their size.

  ```ts
  MaybeResponsive<string>
  ```

* gridTemplateRows

  Define rows and specify their size.

  ```ts
  MaybeResponsive<string>
  ```

* id

  A unique identifier for the element.

  ```ts
  string
  ```

* inlineSize

  Adjust the inline size.

  ```ts
  MaybeResponsive<SizeUnitsOrAuto>
  ```

* justifyContent

  Aligns the grid along the inline (row) axis. This overrides the inline value of \`placeContent\`.

  ```ts
  MaybeResponsive<ReducedJustifyContentKeyword | ''>
  ```

* justifyItems

  Aligns the grid items along the inline (row) axis. This overrides the inline value of \`placeItems\`.

  ```ts
  MaybeResponsive<ReducedJustifyItemsKeyword | ''>
  ```

* maxBlockSize

  Adjust the maximum block size.

  ```ts
  MaybeResponsive<SizeUnitsOrNone>
  ```

* maxInlineSize

  Adjust the maximum inline size.

  ```ts
  MaybeResponsive<SizeUnitsOrNone>
  ```

* minBlockSize

  Adjust the minimum block size.

  ```ts
  MaybeResponsive<SizeUnits>
  ```

* minInlineSize

  Adjust the minimum inline size.

  ```ts
  MaybeResponsive<SizeUnits>
  ```

* overflow

  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.

  ```ts
  'hidden' | 'visible'
  ```

* padding

  Adjust the padding of all edges. \[1-to-4-value syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) 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.

  ```ts
  MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>
  ```

* paddingBlock

  Adjust the block-padding. - \`large none\` means block-start padding is \`large\`, block-end padding is \`none\`. This overrides the block value of \`padding\`.

  ```ts
  MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">
  ```

* paddingBlockEnd

  Adjust the block-end padding. This overrides the block-end value of \`paddingBlock\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* paddingBlockStart

  Adjust the block-start padding. This overrides the block-start value of \`paddingBlock\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* paddingInline

  Adjust the inline padding. - \`large none\` means inline-start padding is \`large\`, inline-end padding is \`none\`. This overrides the inline value of \`padding\`.

  ```ts
  MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">
  ```

* paddingInlineEnd

  Adjust the inline-end padding. This overrides the inline-end value of \`paddingInline\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* paddingInlineStart

  Adjust the inline-start padding. This overrides the inline-start value of \`paddingInline\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* placeContent

  A shorthand property for \`justify-content\` and \`align-content\`.

  ```ts
  MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>
  ```

* placeItems

  A shorthand property for \`justify-items\` and \`align-items\`.

  ```ts
  MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>
  ```

* rowGap

  Adjust spacing between elements in the block axis. This overrides the row value of \`gap\`.

  ```ts
  MaybeResponsive<SpacingKeyword | "">
  ```

```ts
export interface GridProps extends GridElementProps {
}
```

### SpacingKeyword

```ts
SizeKeyword | "none"
```

### SizeKeyword

```ts
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"
```

### MaybeTwoValuesShorthandProperty

```ts
T | `${T} ${T}`
```

### ReducedJustifyContentKeyword

```ts
'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'
```

### ReducedJustifyItemsKeyword

```ts
'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'
```

### SizeUnitsOrNone

```ts
SizeUnits | "none"
```

### PaddingKeyword

```ts
SizeKeyword | "none"
```

## GridItem

Display content within a single item of a grid layout.

* **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**

  **AccessibilityRole**

  **Default: 'generic'**

  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'**

  **Default: 'visible'**

  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.

* **background**

  **'base' | 'subdued' | 'transparent'**

  **Default: 'transparent'**

  Adjust the background of the element.

* **blockSize**

  **MaybeResponsive\<SizeUnitsOrAuto>**

  **Default: 'auto'**

  Adjust the block size.

* **border**

  **BorderShorthand**

  **Default: 'none' - equivalent to \`none base auto\`.**

  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**

  **'' | 'base'**

  **Default: '' - meaning no override**

  Set the color of the border.

  If set, it takes precedence over the `border` property's color.

* **borderRadius**

  **MaybeAllValuesShorthandProperty\<Extract\<GridItemProps$1\['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>**

  **Default: 'none'**

  Set the radius of the border.

  [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:

  * 4 values: `start-start start-end end-end end-start`
  * 3 values: `start-start (start-end & end-start) start-end`
  * 2 values: `(start-start & end-end) (start-end & end-start)`

  For example:

  * `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.
  * `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.
  * `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.
  * `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.

* **borderStyle**

  **MaybeAllValuesShorthandProperty\<BorderStyleKeyword> | ""**

  **Default: '' - meaning no override**

  Set the style of the border.

  If set, it takes precedence over the `border` property's style.

  Like CSS, up to 4 values can be specified.

  If one value is specified, it applies to all sides.

  If two values are specified, they apply to the block sides and inline sides respectively.

  If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.

  If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

* **borderWidth**

  **MaybeAllValuesShorthandProperty\<ReducedBorderSizeKeyword> | ''**

  **Default: '' - meaning no override**

  Set the width of the border.

  If set, it takes precedence over the `border` property's width.

  Like CSS, up to 4 values can be specified.

  If one value is specified, it applies to all sides.

  If two values are specified, they apply to the block sides and inline sides respectively.

  If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.

  If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

* **display**

  **MaybeResponsive<"auto" | "none">**

  **Default: 'auto'**

  Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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.

* **gridColumn**

  **\`span ${number}\` | "auto"**

  **Default: 'auto'**

  Number of columns the item will span across

* **gridRow**

  **\`span ${number}\` | "auto"**

  **Default: 'auto'**

  Number of rows the item will span across

* **id**

  **string**

  A unique identifier for the element.

* **inlineSize**

  **MaybeResponsive\<SizeUnitsOrAuto>**

  **Default: 'auto'**

  Adjust the inline size.

* **maxBlockSize**

  **MaybeResponsive\<SizeUnitsOrNone>**

  **Default: 'none'**

  Adjust the maximum block size.

* **maxInlineSize**

  **MaybeResponsive\<SizeUnitsOrNone>**

  **Default: 'none'**

  Adjust the maximum inline size.

* **minBlockSize**

  **MaybeResponsive\<SizeUnits>**

  **Default: '0'**

  Adjust the minimum block size.

* **minInlineSize**

  **MaybeResponsive\<SizeUnits>**

  **Default: '0'**

  Adjust the minimum inline size.

* **overflow**

  **'hidden' | 'visible'**

  **Default: 'visible'**

  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>>**

  **Default: 'none'**

  Adjust the padding of all edges.

  [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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.

* **paddingBlock**

  **MaybeResponsive\<MaybeTwoValuesShorthandProperty\<PaddingKeyword> | "">**

  **Default: '' - meaning no override**

  Adjust the block-padding.

  * `large none` means block-start padding is `large`, block-end padding is `none`.

  This overrides the block value of `padding`.

* **paddingBlockEnd**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the block-end padding.

  This overrides the block-end value of `paddingBlock`.

* **paddingBlockStart**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the block-start padding.

  This overrides the block-start value of `paddingBlock`.

* **paddingInline**

  **MaybeResponsive\<MaybeTwoValuesShorthandProperty\<PaddingKeyword> | "">**

  **Default: '' - meaning no override**

  Adjust the inline padding.

  * `large none` means inline-start padding is `large`, inline-end padding is `none`.

  This overrides the inline value of `padding`.

* **paddingInlineEnd**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the inline-end padding.

  This overrides the inline-end value of `paddingInline`.

* **paddingInlineStart**

  **MaybeResponsive\<PaddingKeyword | "">**

  **Default: '' - meaning no override**

  Adjust the inline-start padding.

  This overrides the inline-start value of `paddingInline`.

### AccessibilityRole

```ts
"main" | "header" | "footer" | "section" | "aside" | "navigation" | "ordered-list" | "list-item" | "list-item-separator" | "unordered-list" | "separator" | "status" | "alert" | "generic" | "presentation" | "none"
```

### MaybeResponsive

```ts
T | `@container${string}`
```

### SizeUnitsOrAuto

```ts
SizeUnits | "auto"
```

### SizeUnits

```ts
`${number}px` | `${number}%` | `0`
```

### BorderShorthand

```ts
ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`
```

### ReducedBorderSizeKeyword

```ts
'large' | 'base' | 'large-100' | 'large-200' | 'none'
```

### ReducedColorKeyword

```ts
'base'
```

### BorderStyleKeyword

```ts
"none" | "solid" | "dashed" | "dotted" | "auto"
```

### MaybeAllValuesShorthandProperty

```ts
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`
```

### GridItemProps

* accessibilityLabel

  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.

  ```ts
  string
  ```

* accessibilityRole

  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.

  ```ts
  AccessibilityRole
  ```

* accessibilityVisibility

  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.

  ```ts
  'visible' | 'hidden' | 'exclusive'
  ```

* background

  Adjust the background of the element.

  ```ts
  'base' | 'subdued' | 'transparent'
  ```

* blockSize

  Adjust the block size.

  ```ts
  MaybeResponsive<SizeUnitsOrAuto>
  ```

* border

  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\`.

  ```ts
  BorderShorthand
  ```

* borderColor

  Set the color of the border. If set, it takes precedence over the \`border\` property's color.

  ```ts
  '' | 'base'
  ```

* borderRadius

  Set the radius of the border. \[1-to-4-value syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: - 4 values: \`start-start start-end end-end end-start\` - 3 values: \`start-start (start-end & end-start) start-end\` - 2 values: \`(start-start & end-end) (start-end & end-start)\` For example: - \`small-100\` means start-start, start-end, end-end and end-start border radii are \`small-100\`. - \`small-100 none\` means start-start and end-end border radii are \`small-100\`, start-end and end-start border radii are \`none\`. - \`small-100 none large-100\` means start-start border radius is \`small-100\`, start-end border radius is \`none\`, end-end border radius is \`large-100\` and end-start border radius is \`none\`. - \`small-100 none large-100 small-100\` means start-start border radius is \`small-100\`, start-end border radius is \`none\`, end-end border radius is \`large-100\` and end-start border radius is \`small-100\`.

  ```ts
  MaybeAllValuesShorthandProperty<Extract<GridItemProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>
  ```

* borderStyle

  Set the style of the border. If set, it takes precedence over the \`border\` property's style. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

  ```ts
  MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""
  ```

* borderWidth

  Set the width of the border. If set, it takes precedence over the \`border\` property's width. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.

  ```ts
  MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''
  ```

* display

  Sets the outer display type of the component. The outer type sets a component’s participation in \[flow layout]\(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_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.

  ```ts
  MaybeResponsive<"auto" | "none">
  ```

* gridColumn

  Number of columns the item will span across

  ```ts
  `span ${number}` | "auto"
  ```

* gridRow

  Number of rows the item will span across

  ```ts
  `span ${number}` | "auto"
  ```

* id

  A unique identifier for the element.

  ```ts
  string
  ```

* inlineSize

  Adjust the inline size.

  ```ts
  MaybeResponsive<SizeUnitsOrAuto>
  ```

* maxBlockSize

  Adjust the maximum block size.

  ```ts
  MaybeResponsive<SizeUnitsOrNone>
  ```

* maxInlineSize

  Adjust the maximum inline size.

  ```ts
  MaybeResponsive<SizeUnitsOrNone>
  ```

* minBlockSize

  Adjust the minimum block size.

  ```ts
  MaybeResponsive<SizeUnits>
  ```

* minInlineSize

  Adjust the minimum inline size.

  ```ts
  MaybeResponsive<SizeUnits>
  ```

* overflow

  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.

  ```ts
  'hidden' | 'visible'
  ```

* padding

  Adjust the padding of all edges. \[1-to-4-value syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) 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.

  ```ts
  MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>
  ```

* paddingBlock

  Adjust the block-padding. - \`large none\` means block-start padding is \`large\`, block-end padding is \`none\`. This overrides the block value of \`padding\`.

  ```ts
  MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">
  ```

* paddingBlockEnd

  Adjust the block-end padding. This overrides the block-end value of \`paddingBlock\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* paddingBlockStart

  Adjust the block-start padding. This overrides the block-start value of \`paddingBlock\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* paddingInline

  Adjust the inline padding. - \`large none\` means inline-start padding is \`large\`, inline-end padding is \`none\`. This overrides the inline value of \`padding\`.

  ```ts
  MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">
  ```

* paddingInlineEnd

  Adjust the inline-end padding. This overrides the inline-end value of \`paddingInline\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

* paddingInlineStart

  Adjust the inline-start padding. This overrides the inline-start value of \`paddingInline\`.

  ```ts
  MaybeResponsive<PaddingKeyword | "">
  ```

```ts
export interface GridItemProps extends GridItemElementProps {
}
```

### SizeUnitsOrNone

```ts
SizeUnits | "none"
```

### PaddingKeyword

```ts
SizeKeyword | "none"
```

### SizeKeyword

```ts
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"
```

### MaybeTwoValuesShorthandProperty

```ts
T | `${T} ${T}`
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/grid-default-yTqBGt_1.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-grid gridTemplateColumns="1fr auto" gap="base">
    <s-grid-item gridColumn="span 2" border="base" borderStyle="dashed">
      Plants for sale
    </s-grid-item>
    <s-grid-item border="base" borderStyle="dashed">
      Pothos
    </s-grid-item>
    <s-grid-item border="base" borderStyle="dashed">
      $25.00
    </s-grid-item>
  </s-grid>
  ```