Grid
The grid component organizes content in a matrix of rows and columns to create responsive page layouts. Use grid to build complex, multi-column layouts that adapt to different screen sizes and maintain consistent alignment.
Grid follows the CSS grid layout pattern and supports flexible column configurations, gap spacing, and alignment properties for precise layout control. For simpler linear layouts (horizontal or vertical), use stack.
Supported targets
- purchase.
checkout. actions. render-before - purchase.
checkout. block. render - purchase.
checkout. cart-line-item. render-after - purchase.
checkout. cart-line-list. render-after - purchase.
checkout. contact. render-after - purchase.
checkout. delivery-address. render-after - purchase.
checkout. delivery-address. render-before - purchase.
checkout. footer. render-after - purchase.
checkout. header. render-after - purchase.
checkout. payment-method-list. render-after - purchase.
checkout. payment-method-list. render-before - purchase.
checkout. pickup-location-list. render-after - purchase.
checkout. pickup-location-list. render-before - purchase.
checkout. pickup-location-option-item. render-after - purchase.
checkout. pickup-point-list. render-after - purchase.
checkout. pickup-point-list. render-before - purchase.
checkout. reductions. render-after - purchase.
checkout. reductions. render-before - purchase.
checkout. shipping-option-item. details. render - purchase.
checkout. shipping-option-item. render-after - purchase.
checkout. shipping-option-list. render-after - purchase.
checkout. shipping-option-list. render-before - purchase.
thank-you. announcement. render - purchase.
thank-you. block. render - purchase.
thank-you. cart-line-item. render-after - purchase.
thank-you. cart-line-list. render-after - purchase.
thank-you. customer-information. render-after - purchase.
thank-you. footer. render-after - purchase.
thank-you. header. render-after
Supported targets
- purchase.
checkout. actions. render-before - purchase.
checkout. block. render - purchase.
checkout. cart-line-item. render-after - purchase.
checkout. cart-line-list. render-after - purchase.
checkout. contact. render-after - purchase.
checkout. delivery-address. render-after - purchase.
checkout. delivery-address. render-before - purchase.
checkout. footer. render-after - purchase.
checkout. header. render-after - purchase.
checkout. payment-method-list. render-after - purchase.
checkout. payment-method-list. render-before - purchase.
checkout. pickup-location-list. render-after - purchase.
checkout. pickup-location-list. render-before - purchase.
checkout. pickup-location-option-item. render-after - purchase.
checkout. pickup-point-list. render-after - purchase.
checkout. pickup-point-list. render-before - purchase.
checkout. reductions. render-after - purchase.
checkout. reductions. render-before - purchase.
checkout. shipping-option-item. details. render - purchase.
checkout. shipping-option-item. render-after - purchase.
checkout. shipping-option-list. render-after - purchase.
checkout. shipping-option-list. render-before - purchase.
thank-you. announcement. render - purchase.
thank-you. block. render - purchase.
thank-you. cart-line-item. render-after - purchase.
thank-you. cart-line-list. render-after - purchase.
thank-you. customer-information. render-after - purchase.
thank-you. footer. render-after - purchase.
thank-you. header. render-after
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleAccessibilityRoleAccessibilityRoleDefault: 'generic'Default: 'generic'
The semantic meaning of the component's content. When set, assistive technologies use this role to help users navigate the page.
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibility'visible' | 'hidden' | 'exclusive''visible' | 'hidden' | 'exclusive'Default: 'visible'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.
- Anchor to alignContentalignContentalignContentMaybeResponsive<ReducedAlignContentKeyword | ''>MaybeResponsive<ReducedAlignContentKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Controls how the grid's rows are distributed along the block (column) axis when there is extra space. Set to an empty string to use the default.
- Anchor to alignItemsalignItemsalignItemsMaybeResponsive<ReducedAlignItemsKeyword | ''>MaybeResponsive<ReducedAlignItemsKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Aligns grid items along the block (column) axis. Set to an empty string to use the default.
- Anchor to backgroundbackgroundbackground'base' | 'subdued' | 'transparent''base' | 'subdued' | 'transparent'Default: 'transparent'Default: 'transparent'
The background color of the grid.
base: The standard background color for general content areas.subdued: A muted background for secondary or supporting content.transparent: No background color (the default).
- Anchor to blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
The block size of the element (height in horizontal writing modes). Learn more about the block-size property.
: Specific size values in pixels, percentages, or zero for precise control.auto: Automatically sizes based on content and layout constraints.
- Anchor to borderborderborderBorderShorthandBorderShorthandDefault: 'none'Default: 'none'
A shorthand for setting the border width, color, and style in a single property. Individual border properties (
,,) can override values set here.- Anchor to borderColorborderColorborderColor'' | 'base''' | 'base'Default: '' - meaning no overrideDefault: '' - meaning no override
The color of the border using the design system's color scale. Overrides the color value set by
border.- Anchor to borderRadiusborderRadiusborderRadiusMaybeAllValuesShorthandProperty<Extract<GridProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>MaybeAllValuesShorthandProperty<Extract<GridProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>Default: 'none'Default: 'none'
The roundedness of the grid's corners.
none: Sharp corners with no rounding.small-100/small: Subtle rounding for compact elements.base: Standard rounding for most use cases.large/large-100: More pronounced rounding for prominent containers.max: Maximum rounding, creating a pill or circular shape.
Supports 1-to-4-value shorthand syntax for specifying different radii per corner.
- Anchor to borderStyleborderStyleborderStyleMaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""Default: '' - meaning no overrideDefault: '' - meaning no override
Controls 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
borderproperty.Supports 1-to-4-value syntax for specifying different styles per side:
- One value: applies to all sides
- Two values: applies to block sides (top/bottom) and inline sides (left/right) respectively
- Three values: applies to block-start (top), inline sides (left/right), and block-end (bottom) respectively
- Four values: applies to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) respectively
- Anchor to borderWidthborderWidthborderWidthMaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''Default: '' - meaning no overrideDefault: '' - meaning no override
The thickness of the border on all sides. Supports 1-to-4-value shorthand syntax for specifying different widths per side. Overrides the width value set by
border.- Anchor to columnGapcolumnGapcolumnGapMaybeResponsive<SpacingKeyword | "">MaybeResponsive<SpacingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The spacing between child elements along the inline axis (horizontal in horizontal writing modes). Overrides the inline-axis value set by
gap.- Anchor to displaydisplaydisplayMaybeResponsive<"auto" | "none">MaybeResponsive<"auto" | "none">Default: 'auto'Default: 'auto'
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.
- Anchor to gapgapgapMaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>Default: 'none'Default: 'none'
The spacing between child elements. A single value applies to both the inline and block axes. A pair of space-separated values (for example,
large-100 large-500) sets the inline and block axes independently.- Anchor to gridTemplateColumnsgridTemplateColumnsgridTemplateColumnsMaybeResponsive<string>MaybeResponsive<string>Default: 'none'Default: 'none'
Defines the number and size of columns in the grid. Accepts any valid CSS
grid-template-columnsvalue, such as"1fr 2fr"or"repeat(3, 1fr)".- Anchor to gridTemplateRowsgridTemplateRowsgridTemplateRowsMaybeResponsive<string>MaybeResponsive<string>Default: 'none'Default: 'none'
Defines the number and size of rows in the grid. Accepts any valid CSS
grid-template-rowsvalue, such as"auto 1fr"or"repeat(2, 100px)".- Anchor to idididstringstring
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
The inline size of the element (width in horizontal writing modes). Learn more about the inline-size property.
: Specific size values in pixels, percentages, or zero for precise control.auto: Automatically sizes based on content and layout constraints.
- Anchor to justifyContentjustifyContentjustifyContentMaybeResponsive<ReducedJustifyContentKeyword | ''>MaybeResponsive<ReducedJustifyContentKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Controls how the grid's columns are distributed along the inline (row) axis when there is extra space. Set to an empty string to use the default.
- Anchor to justifyItemsjustifyItemsjustifyItemsMaybeResponsive<ReducedJustifyItemsKeyword | ''>MaybeResponsive<ReducedJustifyItemsKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Aligns grid items along the inline (row) axis. Set to an empty string to use the default.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the max-block-size property.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the max-inline-size property.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the min-block-size property.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the min-inline-size property.
- Anchor to overflowoverflowoverflow'hidden' | 'visible''hidden' | 'visible'Default: 'visible'Default: 'visible'
The overflow behavior of the element.
visible: Content that extends beyond the container is visible.hidden: Content that extends beyond the container is clipped and not scrollable.
- Anchor to paddingpaddingpaddingMaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>Default: 'none'Default: 'none'
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 smallUse
autoto inherit padding from the nearest container with removed padding.- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
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 noneapplieslargeto the top andnoneto the bottom.Overrides the block value from
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The block-end padding (bottom in horizontal writing modes).
Overrides the block-end value from
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The block-start padding (top in horizontal writing modes).
Overrides the block-start value from
.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
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 noneapplieslargeto the left andnoneto the right.Overrides the inline value from
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The inline-end padding (right in LTR writing modes, left in RTL).
Overrides the inline-end value from
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The inline-start padding (left in LTR writing modes, right in RTL).
Overrides the inline-start value from
.- Anchor to placeContentplaceContentplaceContentMaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>Default: 'normal normal'Default: 'normal normal'
A shorthand for
andthat sets both distribution axes at once.- Anchor to placeItemsplaceItemsplaceItemsMaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>Default: 'normal normal'Default: 'normal normal'
A shorthand for
andthat sets both alignment axes at once.- Anchor to rowGaprowGaprowGapMaybeResponsive<SpacingKeyword | "">MaybeResponsive<SpacingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The spacing between child elements along the block axis (vertical in horizontal writing modes). Overrides the block-axis value set by
gap.
AccessibilityRole
The semantic role of a component, used by assistive technologies to convey the element’s purpose to users. Each role maps to a specific HTML element or ARIA role. - `main`: The primary content of the page. - `header`: A page or section header. - `footer`: Information such as copyright, navigation links, and privacy statements. - `section`: A generic section that should have a heading or `accessibilityLabel`. - `aside`: Supporting content related to the main content. - `navigation`: A major group of navigation links. - `ordered-list`: A list of ordered items. - `list-item`: An item inside a list. - `list-item-separator`: A divider between list items. - `unordered-list`: A list of unordered items. - `separator`: A divider that separates sections of content. - `status`: A live region with advisory information that is not urgent. - `alert`: Important, usually time-sensitive information. - `generic`: A nameless container with no semantic meaning (renders a `<div>`). - `presentation`: Strips semantic meaning while keeping visual styling. Synonym for `none`. - `none`: Strips semantic meaning while keeping visual styling. Synonym for `presentation`.
"main" | "header" | "footer" | "section" | "aside" | "navigation" | "ordered-list" | "list-item" | "list-item-separator" | "unordered-list" | "separator" | "status" | "alert" | "generic" | "presentation" | "none"MaybeResponsive
Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string. - `T`: Base value that applies in all conditions. - `@container${string}`: Container query string for conditional responsive styling based on container size.
T | `@container${string}`ReducedAlignContentKeyword
The subset of `align-content` values available for the grid component. - `center`: Packs rows toward the center of the grid. - `start`: Packs rows toward the start of the block axis. - `end`: Packs rows toward the end of the block axis. - `normal`: Default browser behavior. - `space-between`: Distributes rows evenly with no space at the edges. - `space-around`: Distributes rows evenly with equal space around each. - `space-evenly`: Distributes rows with equal space between and at the edges. - `stretch`: Stretches rows to fill the available space.
'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'ReducedAlignItemsKeyword
The subset of `align-items` values available for the grid component. - `center`: Centers items along the block axis. - `start`: Aligns items to the start of the block axis. - `end`: Aligns items to the end of the block axis. - `normal`: Default browser behavior. - `baseline`: Aligns items along their text baseline. - `stretch`: Stretches items to fill the cell along the block axis.
'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'SizeUnitsOrAuto
Represents size values that can also be set to `auto` for automatic sizing. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints. Learn more about the [auto value](https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto).
SizeUnits | "auto"SizeUnits
Represents size values in pixels, percentages, or zero. - `` `${number}px` ``: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`). - `` `${number}%` ``: Relative size as a percentage of the parent container (such as `50%`, `100%`). - `0`: Zero size, equivalent to no dimension.
`${number}px` | `${number}%` | `0`BorderShorthand
A shorthand string for specifying border properties. Accepts a size alone (`'base'`), size with color (`'base base'`), or size with color and style (`'base base dashed'`). Omitted values use their defaults.
ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`ReducedBorderSizeKeyword
The subset of border size values available for this component. - `base`: Standard border width. - `large`: Thick border for strong emphasis. - `large-100`: Extra thick border for maximum prominence. - `large-200`: The thickest available border. - `none`: No border.
'large' | 'base' | 'large-100' | 'large-200' | 'none'ReducedColorKeyword
The subset of border color values available for this component. - `base`: The standard border color for most contexts.
'base'BorderStyleKeyword
The visual style of a border. Learn more about [border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). - `none`: No border is rendered. - `solid`: A single continuous line. - `dashed`: A series of short dashes. - `dotted`: A series of round dots. - `auto`: The border style is determined automatically based on the surface's design system.
"none" | "solid" | "dashed" | "dotted" | "auto"MaybeAllValuesShorthandProperty
Represents CSS shorthand properties that accept one to four values, following the [CSS shorthand syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box). Supports specifying values for all four sides: top, right, bottom, and left. - `T`: Single value that applies to all four sides. - `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right). - `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom). - `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`GridProps
- accessibilityLabel
A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.
string - accessibilityRole
The semantic meaning of the component's content. When set, assistive technologies use this role to help users navigate the page.
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.
'visible' | 'hidden' | 'exclusive' - alignContent
Controls how the grid's rows are distributed along the block (column) axis when there is extra space. Set to an empty string to use the default.
MaybeResponsive<ReducedAlignContentKeyword | ''> - alignItems
Aligns grid items along the block (column) axis. Set to an empty string to use the default.
MaybeResponsive<ReducedAlignItemsKeyword | ''> - background
The background color of the grid. - `base`: The standard background color for general content areas. - `subdued`: A muted background for secondary or supporting content. - `transparent`: No background color (the default).
'base' | 'subdued' | 'transparent' - blockSize
The block size of the element (height in horizontal writing modes). Learn more about the [block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size). - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.
MaybeResponsive<SizeUnitsOrAuto> - border
A shorthand for setting the border width, color, and style in a single property. Individual border properties (`borderWidth`, `borderStyle`, `borderColor`) can override values set here.
BorderShorthand - borderColor
The color of the border using the design system's color scale. Overrides the color value set by `border`.
'' | 'base' - borderRadius
The roundedness of the grid's corners. - `none`: Sharp corners with no rounding. - `small-100` / `small`: Subtle rounding for compact elements. - `base`: Standard rounding for most use cases. - `large` / `large-100`: More pronounced rounding for prominent containers. - `max`: Maximum rounding, creating a pill or circular shape. Supports 1-to-4-value shorthand syntax for specifying different radii per corner.
MaybeAllValuesShorthandProperty<Extract<GridProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>> - borderStyle
Controls 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side: - One value: applies to all sides - Two values: applies to block sides (top/bottom) and inline sides (left/right) respectively - Three values: applies to block-start (top), inline sides (left/right), and block-end (bottom) respectively - Four values: applies to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) respectively
MaybeAllValuesShorthandProperty<BorderStyleKeyword> | "" - borderWidth
The thickness of the border on all sides. Supports 1-to-4-value shorthand syntax for specifying different widths per side. Overrides the width value set by `border`.
MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '' - columnGap
The spacing between child elements along the inline axis (horizontal in horizontal writing modes). Overrides the inline-axis value set by `gap`.
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.
MaybeResponsive<"auto" | "none"> - gap
The spacing between child elements. A single value applies to both the inline and block axes. A pair of space-separated values (for example, `large-100 large-500`) sets the inline and block axes independently.
MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>> - gridTemplateColumns
Defines the number and size of columns in the grid. Accepts any valid CSS [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) value, such as `"1fr 2fr"` or `"repeat(3, 1fr)"`.
MaybeResponsive<string> - gridTemplateRows
Defines the number and size of rows in the grid. Accepts any valid CSS [`grid-template-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) value, such as `"auto 1fr"` or `"repeat(2, 100px)"`.
MaybeResponsive<string> - id
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
string - inlineSize
The inline size of the element (width in horizontal writing modes). Learn more about the [inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size). - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.
MaybeResponsive<SizeUnitsOrAuto> - justifyContent
Controls how the grid's columns are distributed along the inline (row) axis when there is extra space. Set to an empty string to use the default.
MaybeResponsive<ReducedJustifyContentKeyword | ''> - justifyItems
Aligns grid items along the inline (row) axis. Set to an empty string to use the default.
MaybeResponsive<ReducedJustifyItemsKeyword | ''> - maxBlockSize
The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the [max-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).
MaybeResponsive<SizeUnitsOrNone> - maxInlineSize
The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the [max-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).
MaybeResponsive<SizeUnitsOrNone> - minBlockSize
The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the [min-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).
MaybeResponsive<SizeUnits> - minInlineSize
The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the [min-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).
MaybeResponsive<SizeUnits> - overflow
The overflow behavior of the element. - `visible`: Content that extends beyond the container is visible. - `hidden`: Content that extends beyond the container is clipped and not scrollable.
'hidden' | 'visible' - padding
The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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.
MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>> - paddingBlock
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingBlockEnd
The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`.
MaybeResponsive<PaddingKeyword | ""> - paddingBlockStart
The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`.
MaybeResponsive<PaddingKeyword | ""> - paddingInline
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingInlineEnd
The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`.
MaybeResponsive<PaddingKeyword | ""> - paddingInlineStart
The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`.
MaybeResponsive<PaddingKeyword | ""> - placeContent
A shorthand for `justifyContent` and `alignContent` that sets both distribution axes at once.
MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword> - placeItems
A shorthand for `justifyItems` and `alignItems` that sets both alignment axes at once.
MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword> - rowGap
The spacing between child elements along the block axis (vertical in horizontal writing modes). Overrides the block-axis value set by `gap`.
MaybeResponsive<SpacingKeyword | "">
SpacingKeyword
SizeKeyword | "none"SizeKeyword
The design system's size scale, used to control the dimensions of components like avatars, icons, and thumbnails. Values range from `"small-500"` (smallest) through `"base"` (standard) to `"large-500"` (largest). Not all components support every size — check the component's `size` property type for its available options.
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"MaybeTwoValuesShorthandProperty
Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values. - `T`: Single value that applies to both dimensions. - `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).
T | `${T} ${T}`ReducedJustifyContentKeyword
The subset of `justify-content` values available for the grid component. - `center`: Packs columns toward the center of the grid. - `start`: Packs columns toward the start of the inline axis. - `end`: Packs columns toward the end of the inline axis. - `normal`: Default browser behavior. - `space-between`: Distributes columns evenly with no space at the edges. - `space-around`: Distributes columns evenly with equal space around each. - `space-evenly`: Distributes columns with equal space between and at the edges. - `stretch`: Stretches columns to fill the available space.
'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'ReducedJustifyItemsKeyword
The subset of `justify-items` values available for the grid component. - `center`: Centers items along the inline axis. - `start`: Aligns items to the start of the inline axis. - `end`: Aligns items to the end of the inline axis. - `normal`: Default browser behavior. - `baseline`: Aligns items along their text baseline. - `stretch`: Stretches items to fill the cell along the inline axis.
'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'SizeUnitsOrNone
Represents size values that can also be set to `none` to remove the size constraint. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `none`: No size constraint, allowing unlimited growth. Learn more about the [none value](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none).
SizeUnits | "none"PaddingKeyword
Defines the padding size for elements, using the standard size scale or `none` for no padding. - `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing. - `none`: No padding.
SizeKeyword | "none"Anchor to grid itemGrid item
The grid item component represents a single cell within a grid layout, allowing you to control how content is positioned and sized within the grid. Use grid item as a child of grid to specify column span, row span, and positioning for individual content areas.
Grid item supports precise placement control through column and row properties, enabling you to create complex layouts where different items occupy varying amounts of space or appear in specific grid positions.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleAccessibilityRoleAccessibilityRoleDefault: 'generic'Default: 'generic'
The semantic meaning of the component's content. When set, assistive technologies use this role to help users navigate the page.
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibility'visible' | 'hidden' | 'exclusive''visible' | 'hidden' | 'exclusive'Default: 'visible'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.
- Anchor to backgroundbackgroundbackground'base' | 'subdued' | 'transparent''base' | 'subdued' | 'transparent'Default: 'transparent'Default: 'transparent'
The background color of the grid item.
base: The standard background color for general content areas.subdued: A muted background for secondary or supporting content.transparent: No background color (the default).
- Anchor to blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
The block size of the element (height in horizontal writing modes). Learn more about the block-size property.
: Specific size values in pixels, percentages, or zero for precise control.auto: Automatically sizes based on content and layout constraints.
- Anchor to borderborderborderBorderShorthandBorderShorthandDefault: 'none'Default: 'none'
A shorthand for setting the border width, color, and style in a single property. Individual border properties (
,,) can override values set here.- Anchor to borderColorborderColorborderColor'' | 'base''' | 'base'Default: '' - meaning no overrideDefault: '' - meaning no override
The color of the border using the design system's color scale. Overrides the color value set by
border.- Anchor to borderRadiusborderRadiusborderRadiusMaybeAllValuesShorthandProperty<Extract<GridItemProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>MaybeAllValuesShorthandProperty<Extract<GridItemProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>Default: 'none'Default: 'none'
The roundedness of the grid item's corners.
none: Sharp corners with no rounding.small-100/small: Subtle rounding for compact elements.base: Standard rounding for most use cases.large/large-100: More pronounced rounding for prominent containers.max: Maximum rounding, creating a pill or circular shape.
Supports 1-to-4-value shorthand syntax for specifying different radii per corner.
- Anchor to borderStyleborderStyleborderStyleMaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""Default: '' - meaning no overrideDefault: '' - meaning no override
Controls 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
borderproperty.Supports 1-to-4-value syntax for specifying different styles per side:
- One value: applies to all sides
- Two values: applies to block sides (top/bottom) and inline sides (left/right) respectively
- Three values: applies to block-start (top), inline sides (left/right), and block-end (bottom) respectively
- Four values: applies to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) respectively
- Anchor to borderWidthborderWidthborderWidthMaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''Default: '' - meaning no overrideDefault: '' - meaning no override
The thickness of the border on all sides. Supports 1-to-4-value shorthand syntax for specifying different widths per side. Overrides the width value set by
border.- Anchor to displaydisplaydisplayMaybeResponsive<"auto" | "none">MaybeResponsive<"auto" | "none">Default: 'auto'Default: 'auto'
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.
- Anchor to gridColumngridColumngridColumn`span ${number}` | "auto"`span ${number}` | "auto"Default: 'auto'Default: 'auto'
The number of columns this item spans within the grid. Set to
autoto let the grid determine placement automatically, or usespan {number}to span a specific number of columns. Learn more aboutgrid-column.- Anchor to gridRowgridRowgridRow`span ${number}` | "auto"`span ${number}` | "auto"Default: 'auto'Default: 'auto'
The number of rows this item spans within the grid. Set to
autoto let the grid determine placement automatically, or usespan {number}to span a specific number of rows. Learn more aboutgrid-row.- Anchor to idididstringstring
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
The inline size of the element (width in horizontal writing modes). Learn more about the inline-size property.
: Specific size values in pixels, percentages, or zero for precise control.auto: Automatically sizes based on content and layout constraints.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the max-block-size property.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the max-inline-size property.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the min-block-size property.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the min-inline-size property.
- Anchor to overflowoverflowoverflow'hidden' | 'visible''hidden' | 'visible'Default: 'visible'Default: 'visible'
The overflow behavior of the element.
visible: Content that extends beyond the container is visible.hidden: Content that extends beyond the container is clipped and not scrollable.
- Anchor to paddingpaddingpaddingMaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>Default: 'none'Default: 'none'
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 smallUse
autoto inherit padding from the nearest container with removed padding.- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
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 noneapplieslargeto the top andnoneto the bottom.Overrides the block value from
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The block-end padding (bottom in horizontal writing modes).
Overrides the block-end value from
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The block-start padding (top in horizontal writing modes).
Overrides the block-start value from
.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
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 noneapplieslargeto the left andnoneto the right.Overrides the inline value from
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The inline-end padding (right in LTR writing modes, left in RTL).
Overrides the inline-end value from
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
The inline-start padding (left in LTR writing modes, right in RTL).
Overrides the inline-start value from
.
GridItemProps
- accessibilityLabel
A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.
string - accessibilityRole
The semantic meaning of the component's content. When set, assistive technologies use this role to help users navigate the page.
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.
'visible' | 'hidden' | 'exclusive' - background
The background color of the grid item. - `base`: The standard background color for general content areas. - `subdued`: A muted background for secondary or supporting content. - `transparent`: No background color (the default).
'base' | 'subdued' | 'transparent' - blockSize
The block size of the element (height in horizontal writing modes). Learn more about the [block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size). - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.
MaybeResponsive<SizeUnitsOrAuto> - border
A shorthand for setting the border width, color, and style in a single property. Individual border properties (`borderWidth`, `borderStyle`, `borderColor`) can override values set here.
BorderShorthand - borderColor
The color of the border using the design system's color scale. Overrides the color value set by `border`.
'' | 'base' - borderRadius
The roundedness of the grid item's corners. - `none`: Sharp corners with no rounding. - `small-100` / `small`: Subtle rounding for compact elements. - `base`: Standard rounding for most use cases. - `large` / `large-100`: More pronounced rounding for prominent containers. - `max`: Maximum rounding, creating a pill or circular shape. Supports 1-to-4-value shorthand syntax for specifying different radii per corner.
MaybeAllValuesShorthandProperty<Extract<GridItemProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>> - borderStyle
Controls 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side: - One value: applies to all sides - Two values: applies to block sides (top/bottom) and inline sides (left/right) respectively - Three values: applies to block-start (top), inline sides (left/right), and block-end (bottom) respectively - Four values: applies to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) respectively
MaybeAllValuesShorthandProperty<BorderStyleKeyword> | "" - borderWidth
The thickness of the border on all sides. Supports 1-to-4-value shorthand syntax for specifying different widths per side. Overrides the width value set by `border`.
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.
MaybeResponsive<"auto" | "none"> - gridColumn
The number of columns this item spans within the grid. Set to `auto` to let the grid determine placement automatically, or use `span {number}` to span a specific number of columns. Learn more about [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).
`span ${number}` | "auto" - gridRow
The number of rows this item spans within the grid. Set to `auto` to let the grid determine placement automatically, or use `span {number}` to span a specific number of rows. Learn more about [`grid-row`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).
`span ${number}` | "auto" - id
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
string - inlineSize
The inline size of the element (width in horizontal writing modes). Learn more about the [inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size). - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints.
MaybeResponsive<SizeUnitsOrAuto> - maxBlockSize
The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the [max-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).
MaybeResponsive<SizeUnitsOrNone> - maxInlineSize
The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the [max-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).
MaybeResponsive<SizeUnitsOrNone> - minBlockSize
The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the [min-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).
MaybeResponsive<SizeUnits> - minInlineSize
The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the [min-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).
MaybeResponsive<SizeUnits> - overflow
The overflow behavior of the element. - `visible`: Content that extends beyond the container is visible. - `hidden`: Content that extends beyond the container is clipped and not scrollable.
'hidden' | 'visible' - padding
The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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.
MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>> - paddingBlock
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingBlockEnd
The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`.
MaybeResponsive<PaddingKeyword | ""> - paddingBlockStart
The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`.
MaybeResponsive<PaddingKeyword | ""> - paddingInline
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingInlineEnd
The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`.
MaybeResponsive<PaddingKeyword | ""> - paddingInlineStart
The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`.
MaybeResponsive<PaddingKeyword | "">
Preview
Examples
Code
Default
<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>