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.
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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.
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleAccessibilityRoleAccessibilityRoleDefault: 'generic'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.
- 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
Aligns the grid along the block (column) axis.
This overrides the block value of
.- Anchor to alignItemsalignItemsalignItemsMaybeResponsive<ReducedAlignItemsKeyword | ''>MaybeResponsive<ReducedAlignItemsKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Aligns the grid items along the block (column) axis.
This overrides the block value of
.- Anchor to backgroundbackgroundbackground'base' | 'subdued' | 'transparent''base' | 'subdued' | 'transparent'Default: 'transparent'Default: 'transparent'
Adjust the background of the element.
- Anchor to blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to borderborderborderBorderShorthandBorderShorthandDefault: 'none' - equivalent to `none base auto`.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
,, and.- Anchor to borderColorborderColorborderColor'' | 'base''' | 'base'Default: '' - meaning no overrideDefault: '' - meaning no override
Set the color of the border.
If set, it takes precedence over the
borderproperty's color.- 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'
Set the radius of the border.
1-to-4-value syntax 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-100means start-start, start-end, end-end and end-start border radii aresmall-100.small-100 nonemeans start-start and end-end border radii aresmall-100, start-end and end-start border radii arenone.small-100 none large-100means start-start border radius issmall-100, start-end border radius isnone, end-end border radius islarge-100and end-start border radius isnone.small-100 none large-100 small-100means start-start border radius issmall-100, start-end border radius isnone, end-end border radius islarge-100and end-start border radius issmall-100.
- 4 values:
- Anchor to borderStyleborderStyleborderStyleMaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""Default: '' - meaning no overrideDefault: '' - meaning no override
Set the style of the border.
If set, it takes precedence over the
borderproperty'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.
- Anchor to borderWidthborderWidthborderWidthMaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''Default: '' - meaning no overrideDefault: '' - meaning no override
Set the width of the border.
If set, it takes precedence over the
borderproperty'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.
- Anchor to columnGapcolumnGapcolumnGapMaybeResponsive<SpacingKeyword | "">MaybeResponsive<SpacingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust spacing between elements in the inline axis.
This overrides the column value of
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'
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.- Anchor to gridTemplateColumnsgridTemplateColumnsgridTemplateColumnsMaybeResponsive<string>MaybeResponsive<string>Default: 'none'Default: 'none'
Define columns and specify their size.
- Anchor to gridTemplateRowsgridTemplateRowsgridTemplateRowsMaybeResponsive<string>MaybeResponsive<string>Default: 'none'Default: 'none'
Define rows and specify their size.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to justifyContentjustifyContentjustifyContentMaybeResponsive<ReducedJustifyContentKeyword | ''>MaybeResponsive<ReducedJustifyContentKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Aligns the grid along the inline (row) axis.
This overrides the inline value of
.- Anchor to justifyItemsjustifyItemsjustifyItemsMaybeResponsive<ReducedJustifyItemsKeyword | ''>MaybeResponsive<ReducedJustifyItemsKeyword | ''>Default: '' - meaning no overrideDefault: '' - meaning no override
Aligns the grid items along the inline (row) axis.
This overrides the inline value of
.- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum inline size.
- Anchor to overflowoverflowoverflow'hidden' | 'visible''hidden' | 'visible'Default: '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.
- Anchor to paddingpaddingpaddingMaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>Default: 'none'Default: 'none'
Adjust the padding of all edges.
1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
- 4 values:
block-start inline-end block-end inline-start - 3 values:
block-start inline block-end - 2 values:
block inline
For example:
largemeans block-start, inline-end, block-end and inline-start paddings arelarge.large nonemeans block-start and block-end paddings arelarge, inline-start and inline-end paddings arenone.large none largemeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding isnone.large none large smallmeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding issmall.
A padding value of
autowill use the default padding for the closest container that has had its usual padding removed.- 4 values:
- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-padding.
large nonemeans block-start padding islarge, block-end padding isnone.
This overrides the block value of
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-end padding.
This overrides the block-end value of
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-start padding.
This overrides the block-start value of
.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline padding.
large nonemeans inline-start padding islarge, inline-end padding isnone.
This overrides the inline value of
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-end padding.
This overrides the inline-end value of
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-start padding.
This overrides the inline-start value of
.- Anchor to placeContentplaceContentplaceContentMaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>Default: 'normal normal'Default: 'normal normal'
A shorthand property for
justify-contentandalign-content.- Anchor to placeItemsplaceItemsplaceItemsMaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>Default: 'normal normal'Default: 'normal normal'
A shorthand property for
justify-itemsandalign-items.- Anchor to rowGaprowGaprowGapMaybeResponsive<SpacingKeyword | "">MaybeResponsive<SpacingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust spacing between elements in the block axis.
This overrides the row value of
gap.
AccessibilityRole
"main" | "header" | "footer" | "section" | "aside" | "navigation" | "ordered-list" | "list-item" | "list-item-separator" | "unordered-list" | "separator" | "status" | "alert" | "generic" | "presentation" | "none"MaybeResponsive
T | `@container${string}`ReducedAlignContentKeyword
'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'ReducedAlignItemsKeyword
'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'SizeUnitsOrAuto
SizeUnits | "auto"SizeUnits
`${number}px` | `${number}%` | `0`BorderShorthand
ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`ReducedBorderSizeKeyword
'large' | 'base' | 'large-100' | 'large-200' | 'none'ReducedColorKeyword
'base'BorderStyleKeyword
"none" | "solid" | "dashed" | "dotted" | "auto"MaybeAllValuesShorthandProperty
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.
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.
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
Aligns the grid along the block (column) axis. This overrides the block value of `placeContent`.
MaybeResponsive<ReducedAlignContentKeyword | ''> - alignItems
Aligns the grid items along the block (column) axis. This overrides the block value of `placeItems`.
MaybeResponsive<ReducedAlignItemsKeyword | ''> - background
Adjust the background of the element.
'base' | 'subdued' | 'transparent' - blockSize
Adjust the block size.
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`.
BorderShorthand - borderColor
Set the color of the border. If set, it takes precedence over the `border` property's color.
'' | '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`.
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.
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.
MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '' - columnGap
Adjust spacing between elements in the inline axis. This overrides the column value of `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
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.
MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>> - gridTemplateColumns
Define columns and specify their size.
MaybeResponsive<string> - gridTemplateRows
Define rows and specify their size.
MaybeResponsive<string> - id
A unique identifier for the element.
string - inlineSize
Adjust the inline size.
MaybeResponsive<SizeUnitsOrAuto> - justifyContent
Aligns the grid along the inline (row) axis. This overrides the inline value of `placeContent`.
MaybeResponsive<ReducedJustifyContentKeyword | ''> - justifyItems
Aligns the grid items along the inline (row) axis. This overrides the inline value of `placeItems`.
MaybeResponsive<ReducedJustifyItemsKeyword | ''> - maxBlockSize
Adjust the maximum block size.
MaybeResponsive<SizeUnitsOrNone> - maxInlineSize
Adjust the maximum inline size.
MaybeResponsive<SizeUnitsOrNone> - minBlockSize
Adjust the minimum block size.
MaybeResponsive<SizeUnits> - minInlineSize
Adjust the minimum inline size.
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.
'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.
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingBlockEnd
Adjust the block-end padding. This overrides the block-end value of `paddingBlock`.
MaybeResponsive<PaddingKeyword | ""> - paddingBlockStart
Adjust the block-start padding. This overrides the block-start value of `paddingBlock`.
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingInlineEnd
Adjust the inline-end padding. This overrides the inline-end value of `paddingInline`.
MaybeResponsive<PaddingKeyword | ""> - paddingInlineStart
Adjust the inline-start padding. This overrides the inline-start value of `paddingInline`.
MaybeResponsive<PaddingKeyword | ""> - placeContent
A shorthand property for `justify-content` and `align-content`.
MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword> - placeItems
A shorthand property for `justify-items` and `align-items`.
MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword> - rowGap
Adjust spacing between elements in the block axis. This overrides the row value of `gap`.
MaybeResponsive<SpacingKeyword | "">
export interface GridProps extends GridElementProps {
}SpacingKeyword
SizeKeyword | "none"SizeKeyword
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"MaybeTwoValuesShorthandProperty
T | `${T} ${T}`ReducedJustifyContentKeyword
'center' | 'start' | 'end' | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'ReducedJustifyItemsKeyword
'center' | 'start' | 'end' | 'normal' | 'baseline' | 'stretch'SizeUnitsOrNone
SizeUnits | "none"PaddingKeyword
SizeKeyword | "none"Anchor to griditemGridItem
Display content within a single item of a grid layout.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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.
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleAccessibilityRoleAccessibilityRoleDefault: 'generic'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.
- 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'
Adjust the background of the element.
- Anchor to blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to borderborderborderBorderShorthandBorderShorthandDefault: 'none' - equivalent to `none base auto`.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
,, and.- Anchor to borderColorborderColorborderColor'' | 'base''' | 'base'Default: '' - meaning no overrideDefault: '' - meaning no override
Set the color of the border.
If set, it takes precedence over the
borderproperty's color.- 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'
Set the radius of the border.
1-to-4-value syntax 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-100means start-start, start-end, end-end and end-start border radii aresmall-100.small-100 nonemeans start-start and end-end border radii aresmall-100, start-end and end-start border radii arenone.small-100 none large-100means start-start border radius issmall-100, start-end border radius isnone, end-end border radius islarge-100and end-start border radius isnone.small-100 none large-100 small-100means start-start border radius issmall-100, start-end border radius isnone, end-end border radius islarge-100and end-start border radius issmall-100.
- 4 values:
- Anchor to borderStyleborderStyleborderStyleMaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""MaybeAllValuesShorthandProperty<BorderStyleKeyword> | ""Default: '' - meaning no overrideDefault: '' - meaning no override
Set the style of the border.
If set, it takes precedence over the
borderproperty'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.
- Anchor to borderWidthborderWidthborderWidthMaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | ''Default: '' - meaning no overrideDefault: '' - meaning no override
Set the width of the border.
If set, it takes precedence over the
borderproperty'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.
- 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'
Number of columns the item will span across
- Anchor to gridRowgridRowgridRow`span ${number}` | "auto"`span ${number}` | "auto"Default: 'auto'Default: 'auto'
Number of rows the item will span across
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum inline size.
- Anchor to overflowoverflowoverflow'hidden' | 'visible''hidden' | 'visible'Default: '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.
- Anchor to paddingpaddingpaddingMaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>Default: 'none'Default: 'none'
Adjust the padding of all edges.
1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
- 4 values:
block-start inline-end block-end inline-start - 3 values:
block-start inline block-end - 2 values:
block inline
For example:
largemeans block-start, inline-end, block-end and inline-start paddings arelarge.large nonemeans block-start and block-end paddings arelarge, inline-start and inline-end paddings arenone.large none largemeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding isnone.large none large smallmeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding issmall.
A padding value of
autowill use the default padding for the closest container that has had its usual padding removed.- 4 values:
- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-padding.
large nonemeans block-start padding islarge, block-end padding isnone.
This overrides the block value of
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-end padding.
This overrides the block-end value of
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-start padding.
This overrides the block-start value of
.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline padding.
large nonemeans inline-start padding islarge, inline-end padding isnone.
This overrides the inline value of
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEndMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-end padding.
This overrides the inline-end value of
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStartMaybeResponsive<PaddingKeyword | "">MaybeResponsive<PaddingKeyword | "">Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-start padding.
This overrides the inline-start value of
.
AccessibilityRole
"main" | "header" | "footer" | "section" | "aside" | "navigation" | "ordered-list" | "list-item" | "list-item-separator" | "unordered-list" | "separator" | "status" | "alert" | "generic" | "presentation" | "none"MaybeResponsive
T | `@container${string}`SizeUnitsOrAuto
SizeUnits | "auto"SizeUnits
`${number}px` | `${number}%` | `0`BorderShorthand
ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`ReducedBorderSizeKeyword
'large' | 'base' | 'large-100' | 'large-200' | 'none'ReducedColorKeyword
'base'BorderStyleKeyword
"none" | "solid" | "dashed" | "dotted" | "auto"MaybeAllValuesShorthandProperty
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.
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.
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
Adjust the background of the element.
'base' | 'subdued' | 'transparent' - blockSize
Adjust the block size.
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`.
BorderShorthand - borderColor
Set the color of the border. If set, it takes precedence over the `border` property's color.
'' | '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`.
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.
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.
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
Number of columns the item will span across
`span ${number}` | "auto" - gridRow
Number of rows the item will span across
`span ${number}` | "auto" - id
A unique identifier for the element.
string - inlineSize
Adjust the inline size.
MaybeResponsive<SizeUnitsOrAuto> - maxBlockSize
Adjust the maximum block size.
MaybeResponsive<SizeUnitsOrNone> - maxInlineSize
Adjust the maximum inline size.
MaybeResponsive<SizeUnitsOrNone> - minBlockSize
Adjust the minimum block size.
MaybeResponsive<SizeUnits> - minInlineSize
Adjust the minimum inline size.
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.
'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.
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingBlockEnd
Adjust the block-end padding. This overrides the block-end value of `paddingBlock`.
MaybeResponsive<PaddingKeyword | ""> - paddingBlockStart
Adjust the block-start padding. This overrides the block-start value of `paddingBlock`.
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`.
MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | ""> - paddingInlineEnd
Adjust the inline-end padding. This overrides the inline-end value of `paddingInline`.
MaybeResponsive<PaddingKeyword | ""> - paddingInlineStart
Adjust the inline-start padding. This overrides the inline-start value of `paddingInline`.
MaybeResponsive<PaddingKeyword | "">
export interface GridItemProps extends GridItemElementProps {
}SizeUnitsOrNone
SizeUnits | "none"PaddingKeyword
SizeKeyword | "none"SizeKeyword
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"MaybeTwoValuesShorthandProperty
T | `${T} ${T}`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>