Choose a version:

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 accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.

Only use this when the element's content is not enough context for users using assistive technologies.
Anchor to accessibilityRole accessibilityRole Default: 'generic': Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
Anchor to accessibilityVisibility accessibilityVisibility 'visible' | 'hidden' | 'exclusive' Default: 'visible': Changes the visibility of the element.

visible: the element is visible to all users.

hidden: the element is removed from the accessibility tree but remains visible.

exclusive: the element is visually hidden but remains in the accessibility tree.
Anchor to alignContent alignContent < | ''>: Aligns the grid along the block (column) axis.

This overrides the block value of placeContent.
Anchor to alignItems alignItems < | ''>: Aligns the grid items along the block (column) axis.

This overrides the block value of placeItems.
Anchor to background background 'base' | 'subdued' | 'transparent': Adjust the background of the element.
Anchor to blockSize blockSize <> Default: 'auto': Adjust the block size.
Anchor to border 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.
Anchor to borderColor borderColor '' | 'base': Set the color of the border.

If set, it takes precedence over the border property's color.
Anchor to borderRadius borderRadius <Extract<$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>: 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-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.
Anchor to borderStyle borderStyle <> | "" Default: '' - meaning no override: Set the style of the border.

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

Like CSS, up to 4 values can be specified.

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

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

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

If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
Anchor to borderWidth 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.
Anchor to columnGap columnGap < | ""> Default: '' - meaning no override: Adjust spacing between elements in the inline axis.

This overrides the column value of gap.
Anchor to display display <"auto" | "none"> 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 gap gap <<>> 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 gridTemplateColumns gridTemplateColumns <string> Default: 'none': Define columns and specify their size.
Anchor to gridTemplateRows gridTemplateRows <string> Default: 'none': Define rows and specify their size.
Anchor to id id string: A unique identifier for the element.
Anchor to inlineSize inlineSize <> Default: 'auto': Adjust the inline size.
Anchor to justifyContent justifyContent < | ''>: Aligns the grid along the inline (row) axis.

This overrides the inline value of placeContent.
Anchor to justifyItems justifyItems < | ''>: Aligns the grid items along the inline (row) axis.

This overrides the inline value of placeItems.
Anchor to maxBlockSize maxBlockSize <> Default: 'none': Adjust the maximum block size.
Anchor to maxInlineSize maxInlineSize <> Default: 'none': Adjust the maximum inline size.
Anchor to minBlockSize minBlockSize <> Default: '0': Adjust the minimum block size.
Anchor to minInlineSize minInlineSize <> Default: '0': Adjust the minimum inline size.
Anchor to overflow overflow 'hidden' | 'visible' Default: 'visible': Sets the overflow behavior of the element.

hidden: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.

visible: the content that extends beyond the element’s container is visible.
Anchor to padding padding <<>> 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:

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.
Anchor to paddingBlock paddingBlock <<> | ""> Default: '' - meaning no override: Adjust the block-padding.

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

This overrides the block value of padding.
Anchor to paddingBlockEnd paddingBlockEnd < | ""> Default: '' - meaning no override: Adjust the block-end padding.

This overrides the block-end value of paddingBlock.
Anchor to paddingBlockStart paddingBlockStart < | ""> Default: '' - meaning no override: Adjust the block-start padding.

This overrides the block-start value of paddingBlock.
Anchor to paddingInline paddingInline <<> | ""> Default: '' - meaning no override: Adjust the inline padding.

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

This overrides the inline value of padding.
Anchor to paddingInlineEnd paddingInlineEnd < | ""> Default: '' - meaning no override: Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.
Anchor to paddingInlineStart paddingInlineStart < | ""> Default: '' - meaning no override: Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.
Anchor to placeContent placeContent <`${} ${}` | >: A shorthand property for justify-content and align-content.
Anchor to placeItems placeItems <`${} ${}` | >: A shorthand property for justify-items and align-items.
Anchor to rowGap rowGap < | ""> Default: '' - 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}`

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"

Was this section helpful?

Anchor to griditemGridItem

Display content within a single item of a grid layout.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.

Only use this when the element's content is not enough context for users using assistive technologies.
Anchor to accessibilityRole accessibilityRole Default: 'generic': Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
Anchor to accessibilityVisibility accessibilityVisibility 'visible' | 'hidden' | 'exclusive' Default: 'visible': Changes the visibility of the element.

visible: the element is visible to all users.

hidden: the element is removed from the accessibility tree but remains visible.

exclusive: the element is visually hidden but remains in the accessibility tree.
Anchor to background background 'base' | 'subdued' | 'transparent': Adjust the background of the element.
Anchor to blockSize blockSize <> Default: 'auto': Adjust the block size.
Anchor to border 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.
Anchor to borderColor borderColor '' | 'base': Set the color of the border.

If set, it takes precedence over the border property's color.
Anchor to borderRadius borderRadius <Extract<$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>: 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-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.
Anchor to borderStyle borderStyle <> | "" Default: '' - meaning no override: Set the style of the border.

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

Like CSS, up to 4 values can be specified.

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

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

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

If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
Anchor to borderWidth 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.
Anchor to display display <"auto" | "none"> 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 gridColumn gridColumn `span ${number}` | "auto" Default: 'auto': Number of columns the item will span across
Anchor to gridRow gridRow `span ${number}` | "auto" Default: 'auto': Number of rows the item will span across
Anchor to id id string: A unique identifier for the element.
Anchor to inlineSize inlineSize <> Default: 'auto': Adjust the inline size.
Anchor to maxBlockSize maxBlockSize <> Default: 'none': Adjust the maximum block size.
Anchor to maxInlineSize maxInlineSize <> Default: 'none': Adjust the maximum inline size.
Anchor to minBlockSize minBlockSize <> Default: '0': Adjust the minimum block size.
Anchor to minInlineSize minInlineSize <> Default: '0': Adjust the minimum inline size.
Anchor to overflow overflow 'hidden' | 'visible' Default: 'visible': Sets the overflow behavior of the element.

hidden: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.

visible: the content that extends beyond the element’s container is visible.
Anchor to padding padding <<>> 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:

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.
Anchor to paddingBlock paddingBlock <<> | ""> Default: '' - meaning no override: Adjust the block-padding.

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

This overrides the block value of padding.
Anchor to paddingBlockEnd paddingBlockEnd < | ""> Default: '' - meaning no override: Adjust the block-end padding.

This overrides the block-end value of paddingBlock.
Anchor to paddingBlockStart paddingBlockStart < | ""> Default: '' - meaning no override: Adjust the block-start padding.

This overrides the block-start value of paddingBlock.
Anchor to paddingInline paddingInline <<> | ""> Default: '' - meaning no override: Adjust the inline padding.

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

This overrides the inline value of padding.
Anchor to paddingInlineEnd paddingInlineEnd < | ""> Default: '' - meaning no override: Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.
Anchor to paddingInlineStart paddingInlineStart < | ""> Default: '' - meaning no override: Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

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}`

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}`

Was this section helpful?

Code

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

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>

Grid

Anchor to propertiesProperties

AccessibilityRole

MaybeResponsive

ReducedAlignContentKeyword

ReducedAlignItemsKeyword

SizeUnitsOrAuto

SizeUnits

BorderShorthand

ReducedBorderSizeKeyword

ReducedColorKeyword

BorderStyleKeyword

MaybeAllValuesShorthandProperty

SpacingKeyword

SizeKeyword

MaybeTwoValuesShorthandProperty

ReducedJustifyContentKeyword

ReducedJustifyItemsKeyword

SizeUnitsOrNone

PaddingKeyword

Anchor to griditemGridItem

AccessibilityRole

MaybeResponsive

SizeUnitsOrAuto

SizeUnits

BorderShorthand

ReducedBorderSizeKeyword

ReducedColorKeyword

BorderStyleKeyword

MaybeAllValuesShorthandProperty

SizeUnitsOrNone

PaddingKeyword

SizeKeyword

MaybeTwoValuesShorthandProperty

Examples

Code

Default

Preview