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.
Anchor to PropertiesProperties
Configure the following properties on the grid component.
- Anchor to gridTemplateColumnsgridTemplateColumnsgridTemplateColumnsstringstringDefault: 'none'Default: 'none'requiredrequired
The columns in the grid and their sizes.
Accepts:
- Track sizing values, such as
1fr auto - A responsive value string with the supported track sizing values as a query value
- Track sizing values, such as
- Anchor to gridTemplateRowsgridTemplateRowsgridTemplateRowsstringstringDefault: 'none'Default: 'none'requiredrequired
The rows in the grid and their sizes.
Accepts:
- Track sizing values, such as
1fr auto - A responsive value string with the supported track sizing values as a query value
- Track sizing values, such as
- Anchor to justifyItemsjustifyItemsjustifyItems"" | JustifyItemsKeyword"" | JustifyItemsKeywordDefault: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
Aligns the grid items along the inline axis.
- Anchor to alignItemsalignItemsalignItems"" | AlignItemsKeyword"" | AlignItemsKeywordDefault: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
Aligns the grid items along the block axis.
- Anchor to placeItemsplaceItemsplaceItemsAlignItemsKeyword | "normal normal" | "normal stretch" | "normal baseline" | "normal first baseline" | "normal last baseline" | "normal start" | "normal end" | "normal center" | "normal unsafe start" | "normal unsafe end" | "normal unsafe center" | "normal safe start" | "normal safe end" | "normal safe center" | "stretch normal" | "stretch stretch" | "stretch baseline" | "stretch first baseline" | "stretch last baseline" | "stretch start" | "stretch end" | "stretch center" | "stretch unsafe start" | "stretch unsafe end" | "stretch unsafe center" | "stretch safe start" | "stretch safe end" | "stretch safe center" | "baseline normal" | "baseline stretch" | "baseline baseline" | "baseline first baseline" | "baseline last baseline" | "baseline start" | "baseline end" | "baseline center" | "baseline unsafe start" | "baseline unsafe end" | "baseline unsafe center" | "baseline safe start" | "baseline safe end" | "baseline safe center" | "first baseline normal" | "first baseline stretch" | "first baseline baseline" | "first baseline first baseline" | "first baseline last baseline" | "first baseline start" | "first baseline end" | "first baseline center" | "first baseline unsafe start" | "first baseline unsafe end" | "first baseline unsafe center" | "first baseline safe start" | "first baseline safe end" | "first baseline safe center" | "last baseline normal" | "last baseline stretch" | "last baseline baseline" | "last baseline first baseline" | "last baseline last baseline" | "last baseline start" | "last baseline end" | "last baseline center" | "last baseline unsafe start" | "last baseline unsafe end" | "last baseline unsafe center" | "last baseline safe start" | "last baseline safe end" | "last baseline safe center" | "start normal" | "start stretch" | "start baseline" | "start first baseline" | "start last baseline" | "start start" | "start end" | "start center" | "start unsafe start" | "start unsafe end" | "start unsafe center" | "start safe start" | "start safe end" | "start safe center" | "end normal" | "end stretch" | "end baseline" | "end first baseline" | "end last baseline" | "end start" | "end end" | "end center" | "end unsafe start" | "end unsafe end" | "end unsafe center" | "end safe start" | "end safe end" | "end safe center" | "center normal" | "center stretch" | "center baseline" | "center first baseline" | "center last baseline" | "center start" | "center end" | "center center" | "center unsafe start" | "center unsafe end" | "center unsafe center" | "center safe start" | "center safe end" | "center safe center" | "unsafe start normal" | "unsafe start stretch" | "unsafe start baseline" | "unsafe start first baseline" | "unsafe start last baseline" | "unsafe start start" | "unsafe start end" | "unsafe start center" | "unsafe start unsafe start" | "unsafe start unsafe end" | "unsafe start unsafe center" | "unsafe start safe start" | "unsafe start safe end" | "unsafe start safe center" | "unsafe end normal" | "unsafe end stretch" | "unsafe end baseline" | "unsafe end first baseline" | "unsafe end last baseline" | "unsafe end start" | "unsafe end end" | "unsafe end center" | "unsafe end unsafe start" | "unsafe end unsafe end" | "unsafe end unsafe center" | "unsafe end safe start" | "unsafe end safe end" | "unsafe end safe center" | "unsafe center normal" | "unsafe center stretch" | "unsafe center baseline" | "unsafe center first baseline" | "unsafe center last baseline" | "unsafe center start" | "unsafe center end" | "unsafe center center" | "unsafe center unsafe start" | "unsafe center unsafe end" | "unsafe center unsafe center" | "unsafe center safe start" | "unsafe center safe end" | "unsafe center safe center" | "safe start normal" | "safe start stretch" | "safe start baseline" | "safe start first baseline" | "safe start last baseline" | "safe start start" | "safe start end" | "safe start center" | "safe start unsafe start" | "safe start unsafe end" | "safe start unsafe center" | "safe start safe start" | "safe start safe end" | "safe start safe center" | "safe end normal" | "safe end stretch" | "safe end baseline" | "safe end first baseline" | "safe end last baseline" | "safe end start" | "safe end end" | "safe end center" | "safe end unsafe start" | "safe end unsafe end" | "safe end unsafe center" | "safe end safe start" | "safe end safe end" | "safe end safe center" | "safe center normal" | "safe center stretch" | "safe center baseline" | "safe center first baseline" | "safe center last baseline" | "safe center start" | "safe center end" | "safe center center" | "safe center unsafe start" | "safe center unsafe end" | "safe center unsafe center" | "safe center safe start" | "safe center safe end" | "safe center safe center"AlignItemsKeyword | "normal normal" | "normal stretch" | "normal baseline" | "normal first baseline" | "normal last baseline" | "normal start" | "normal end" | "normal center" | "normal unsafe start" | "normal unsafe end" | "normal unsafe center" | "normal safe start" | "normal safe end" | "normal safe center" | "stretch normal" | "stretch stretch" | "stretch baseline" | "stretch first baseline" | "stretch last baseline" | "stretch start" | "stretch end" | "stretch center" | "stretch unsafe start" | "stretch unsafe end" | "stretch unsafe center" | "stretch safe start" | "stretch safe end" | "stretch safe center" | "baseline normal" | "baseline stretch" | "baseline baseline" | "baseline first baseline" | "baseline last baseline" | "baseline start" | "baseline end" | "baseline center" | "baseline unsafe start" | "baseline unsafe end" | "baseline unsafe center" | "baseline safe start" | "baseline safe end" | "baseline safe center" | "first baseline normal" | "first baseline stretch" | "first baseline baseline" | "first baseline first baseline" | "first baseline last baseline" | "first baseline start" | "first baseline end" | "first baseline center" | "first baseline unsafe start" | "first baseline unsafe end" | "first baseline unsafe center" | "first baseline safe start" | "first baseline safe end" | "first baseline safe center" | "last baseline normal" | "last baseline stretch" | "last baseline baseline" | "last baseline first baseline" | "last baseline last baseline" | "last baseline start" | "last baseline end" | "last baseline center" | "last baseline unsafe start" | "last baseline unsafe end" | "last baseline unsafe center" | "last baseline safe start" | "last baseline safe end" | "last baseline safe center" | "start normal" | "start stretch" | "start baseline" | "start first baseline" | "start last baseline" | "start start" | "start end" | "start center" | "start unsafe start" | "start unsafe end" | "start unsafe center" | "start safe start" | "start safe end" | "start safe center" | "end normal" | "end stretch" | "end baseline" | "end first baseline" | "end last baseline" | "end start" | "end end" | "end center" | "end unsafe start" | "end unsafe end" | "end unsafe center" | "end safe start" | "end safe end" | "end safe center" | "center normal" | "center stretch" | "center baseline" | "center first baseline" | "center last baseline" | "center start" | "center end" | "center center" | "center unsafe start" | "center unsafe end" | "center unsafe center" | "center safe start" | "center safe end" | "center safe center" | "unsafe start normal" | "unsafe start stretch" | "unsafe start baseline" | "unsafe start first baseline" | "unsafe start last baseline" | "unsafe start start" | "unsafe start end" | "unsafe start center" | "unsafe start unsafe start" | "unsafe start unsafe end" | "unsafe start unsafe center" | "unsafe start safe start" | "unsafe start safe end" | "unsafe start safe center" | "unsafe end normal" | "unsafe end stretch" | "unsafe end baseline" | "unsafe end first baseline" | "unsafe end last baseline" | "unsafe end start" | "unsafe end end" | "unsafe end center" | "unsafe end unsafe start" | "unsafe end unsafe end" | "unsafe end unsafe center" | "unsafe end safe start" | "unsafe end safe end" | "unsafe end safe center" | "unsafe center normal" | "unsafe center stretch" | "unsafe center baseline" | "unsafe center first baseline" | "unsafe center last baseline" | "unsafe center start" | "unsafe center end" | "unsafe center center" | "unsafe center unsafe start" | "unsafe center unsafe end" | "unsafe center unsafe center" | "unsafe center safe start" | "unsafe center safe end" | "unsafe center safe center" | "safe start normal" | "safe start stretch" | "safe start baseline" | "safe start first baseline" | "safe start last baseline" | "safe start start" | "safe start end" | "safe start center" | "safe start unsafe start" | "safe start unsafe end" | "safe start unsafe center" | "safe start safe start" | "safe start safe end" | "safe start safe center" | "safe end normal" | "safe end stretch" | "safe end baseline" | "safe end first baseline" | "safe end last baseline" | "safe end start" | "safe end end" | "safe end center" | "safe end unsafe start" | "safe end unsafe end" | "safe end unsafe center" | "safe end safe start" | "safe end safe end" | "safe end safe center" | "safe center normal" | "safe center stretch" | "safe center baseline" | "safe center first baseline" | "safe center last baseline" | "safe center start" | "safe center end" | "safe center center" | "safe center unsafe start" | "safe center unsafe end" | "safe center unsafe center" | "safe center safe start" | "safe center safe end" | "safe center safe center"Default: 'normal normal'Default: 'normal normal'requiredrequired
A shorthand property for
justify-itemsandalign-items.- Anchor to justifyContentjustifyContentjustifyContent"" | JustifyContentKeyword"" | JustifyContentKeywordDefault: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
Aligns the grid along the inline axis. This overrides the inline value of
.- Anchor to alignContentalignContentalignContent"" | AlignContentKeyword"" | AlignContentKeywordDefault: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
Aligns the grid along the block axis. This overrides the block value of
.- Anchor to placeContentplaceContentplaceContent"normal normal" | "normal stretch" | "normal start" | "normal end" | "normal center" | "normal unsafe start" | "normal unsafe end" | "normal unsafe center" | "normal safe start" | "normal safe end" | "normal safe center" | "stretch normal" | "stretch stretch" | "stretch start" | "stretch end" | "stretch center" | "stretch unsafe start" | "stretch unsafe end" | "stretch unsafe center" | "stretch safe start" | "stretch safe end" | "stretch safe center" | "baseline normal" | "baseline stretch" | "baseline start" | "baseline end" | "baseline center" | "baseline unsafe start" | "baseline unsafe end" | "baseline unsafe center" | "baseline safe start" | "baseline safe end" | "baseline safe center" | "first baseline normal" | "first baseline stretch" | "first baseline start" | "first baseline end" | "first baseline center" | "first baseline unsafe start" | "first baseline unsafe end" | "first baseline unsafe center" | "first baseline safe start" | "first baseline safe end" | "first baseline safe center" | "last baseline normal" | "last baseline stretch" | "last baseline start" | "last baseline end" | "last baseline center" | "last baseline unsafe start" | "last baseline unsafe end" | "last baseline unsafe center" | "last baseline safe start" | "last baseline safe end" | "last baseline safe center" | "start normal" | "start stretch" | "start start" | "start end" | "start center" | "start unsafe start" | "start unsafe end" | "start unsafe center" | "start safe start" | "start safe end" | "start safe center" | "end normal" | "end stretch" | "end start" | "end end" | "end center" | "end unsafe start" | "end unsafe end" | "end unsafe center" | "end safe start" | "end safe end" | "end safe center" | "center normal" | "center stretch" | "center start" | "center end" | "center center" | "center unsafe start" | "center unsafe end" | "center unsafe center" | "center safe start" | "center safe end" | "center safe center" | "unsafe start normal" | "unsafe start stretch" | "unsafe start start" | "unsafe start end" | "unsafe start center" | "unsafe start unsafe start" | "unsafe start unsafe end" | "unsafe start unsafe center" | "unsafe start safe start" | "unsafe start safe end" | "unsafe start safe center" | "unsafe end normal" | "unsafe end stretch" | "unsafe end start" | "unsafe end end" | "unsafe end center" | "unsafe end unsafe start" | "unsafe end unsafe end" | "unsafe end unsafe center" | "unsafe end safe start" | "unsafe end safe end" | "unsafe end safe center" | "unsafe center normal" | "unsafe center stretch" | "unsafe center start" | "unsafe center end" | "unsafe center center" | "unsafe center unsafe start" | "unsafe center unsafe end" | "unsafe center unsafe center" | "unsafe center safe start" | "unsafe center safe end" | "unsafe center safe center" | "safe start normal" | "safe start stretch" | "safe start start" | "safe start end" | "safe start center" | "safe start unsafe start" | "safe start unsafe end" | "safe start unsafe center" | "safe start safe start" | "safe start safe end" | "safe start safe center" | "safe end normal" | "safe end stretch" | "safe end start" | "safe end end" | "safe end center" | "safe end unsafe start" | "safe end unsafe end" | "safe end unsafe center" | "safe end safe start" | "safe end safe end" | "safe end safe center" | "safe center normal" | "safe center stretch" | "safe center start" | "safe center end" | "safe center center" | "safe center unsafe start" | "safe center unsafe end" | "safe center unsafe center" | "safe center safe start" | "safe center safe end" | "safe center safe center" | AlignContentKeyword | "normal space-between" | "normal space-around" | "normal space-evenly" | "baseline space-between" | "baseline space-around" | "baseline space-evenly" | "first baseline space-between" | "first baseline space-around" | "first baseline space-evenly" | "last baseline space-between" | "last baseline space-around" | "last baseline space-evenly" | "start space-between" | "start space-around" | "start space-evenly" | "end space-between" | "end space-around" | "end space-evenly" | "center space-between" | "center space-around" | "center space-evenly" | "unsafe start space-between" | "unsafe start space-around" | "unsafe start space-evenly" | "unsafe end space-between" | "unsafe end space-around" | "unsafe end space-evenly" | "unsafe center space-between" | "unsafe center space-around" | "unsafe center space-evenly" | "safe start space-between" | "safe start space-around" | "safe start space-evenly" | "safe end space-between" | "safe end space-around" | "safe end space-evenly" | "safe center space-between" | "safe center space-around" | "safe center space-evenly" | "stretch space-between" | "stretch space-around" | "stretch space-evenly" | "space-between normal" | "space-between start" | "space-between end" | "space-between center" | "space-between unsafe start" | "space-between unsafe end" | "space-between unsafe center" | "space-between safe start" | "space-between safe end" | "space-between safe center" | "space-between stretch" | "space-between space-between" | "space-between space-around" | "space-between space-evenly" | "space-around normal" | "space-around start" | "space-around end" | "space-around center" | "space-around unsafe start" | "space-around unsafe end" | "space-around unsafe center" | "space-around safe start" | "space-around safe end" | "space-around safe center" | "space-around stretch" | "space-around space-between" | "space-around space-around" | "space-around space-evenly" | "space-evenly normal" | "space-evenly start" | "space-evenly end" | "space-evenly center" | "space-evenly unsafe start" | "space-evenly unsafe end" | "space-evenly unsafe center" | "space-evenly safe start" | "space-evenly safe end" | "space-evenly safe center" | "space-evenly stretch" | "space-evenly space-between" | "space-evenly space-around" | "space-evenly space-evenly""normal normal" | "normal stretch" | "normal start" | "normal end" | "normal center" | "normal unsafe start" | "normal unsafe end" | "normal unsafe center" | "normal safe start" | "normal safe end" | "normal safe center" | "stretch normal" | "stretch stretch" | "stretch start" | "stretch end" | "stretch center" | "stretch unsafe start" | "stretch unsafe end" | "stretch unsafe center" | "stretch safe start" | "stretch safe end" | "stretch safe center" | "baseline normal" | "baseline stretch" | "baseline start" | "baseline end" | "baseline center" | "baseline unsafe start" | "baseline unsafe end" | "baseline unsafe center" | "baseline safe start" | "baseline safe end" | "baseline safe center" | "first baseline normal" | "first baseline stretch" | "first baseline start" | "first baseline end" | "first baseline center" | "first baseline unsafe start" | "first baseline unsafe end" | "first baseline unsafe center" | "first baseline safe start" | "first baseline safe end" | "first baseline safe center" | "last baseline normal" | "last baseline stretch" | "last baseline start" | "last baseline end" | "last baseline center" | "last baseline unsafe start" | "last baseline unsafe end" | "last baseline unsafe center" | "last baseline safe start" | "last baseline safe end" | "last baseline safe center" | "start normal" | "start stretch" | "start start" | "start end" | "start center" | "start unsafe start" | "start unsafe end" | "start unsafe center" | "start safe start" | "start safe end" | "start safe center" | "end normal" | "end stretch" | "end start" | "end end" | "end center" | "end unsafe start" | "end unsafe end" | "end unsafe center" | "end safe start" | "end safe end" | "end safe center" | "center normal" | "center stretch" | "center start" | "center end" | "center center" | "center unsafe start" | "center unsafe end" | "center unsafe center" | "center safe start" | "center safe end" | "center safe center" | "unsafe start normal" | "unsafe start stretch" | "unsafe start start" | "unsafe start end" | "unsafe start center" | "unsafe start unsafe start" | "unsafe start unsafe end" | "unsafe start unsafe center" | "unsafe start safe start" | "unsafe start safe end" | "unsafe start safe center" | "unsafe end normal" | "unsafe end stretch" | "unsafe end start" | "unsafe end end" | "unsafe end center" | "unsafe end unsafe start" | "unsafe end unsafe end" | "unsafe end unsafe center" | "unsafe end safe start" | "unsafe end safe end" | "unsafe end safe center" | "unsafe center normal" | "unsafe center stretch" | "unsafe center start" | "unsafe center end" | "unsafe center center" | "unsafe center unsafe start" | "unsafe center unsafe end" | "unsafe center unsafe center" | "unsafe center safe start" | "unsafe center safe end" | "unsafe center safe center" | "safe start normal" | "safe start stretch" | "safe start start" | "safe start end" | "safe start center" | "safe start unsafe start" | "safe start unsafe end" | "safe start unsafe center" | "safe start safe start" | "safe start safe end" | "safe start safe center" | "safe end normal" | "safe end stretch" | "safe end start" | "safe end end" | "safe end center" | "safe end unsafe start" | "safe end unsafe end" | "safe end unsafe center" | "safe end safe start" | "safe end safe end" | "safe end safe center" | "safe center normal" | "safe center stretch" | "safe center start" | "safe center end" | "safe center center" | "safe center unsafe start" | "safe center unsafe end" | "safe center unsafe center" | "safe center safe start" | "safe center safe end" | "safe center safe center" | AlignContentKeyword | "normal space-between" | "normal space-around" | "normal space-evenly" | "baseline space-between" | "baseline space-around" | "baseline space-evenly" | "first baseline space-between" | "first baseline space-around" | "first baseline space-evenly" | "last baseline space-between" | "last baseline space-around" | "last baseline space-evenly" | "start space-between" | "start space-around" | "start space-evenly" | "end space-between" | "end space-around" | "end space-evenly" | "center space-between" | "center space-around" | "center space-evenly" | "unsafe start space-between" | "unsafe start space-around" | "unsafe start space-evenly" | "unsafe end space-between" | "unsafe end space-around" | "unsafe end space-evenly" | "unsafe center space-between" | "unsafe center space-around" | "unsafe center space-evenly" | "safe start space-between" | "safe start space-around" | "safe start space-evenly" | "safe end space-between" | "safe end space-around" | "safe end space-evenly" | "safe center space-between" | "safe center space-around" | "safe center space-evenly" | "stretch space-between" | "stretch space-around" | "stretch space-evenly" | "space-between normal" | "space-between start" | "space-between end" | "space-between center" | "space-between unsafe start" | "space-between unsafe end" | "space-between unsafe center" | "space-between safe start" | "space-between safe end" | "space-between safe center" | "space-between stretch" | "space-between space-between" | "space-between space-around" | "space-between space-evenly" | "space-around normal" | "space-around start" | "space-around end" | "space-around center" | "space-around unsafe start" | "space-around unsafe end" | "space-around unsafe center" | "space-around safe start" | "space-around safe end" | "space-around safe center" | "space-around stretch" | "space-around space-between" | "space-around space-around" | "space-around space-evenly" | "space-evenly normal" | "space-evenly start" | "space-evenly end" | "space-evenly center" | "space-evenly unsafe start" | "space-evenly unsafe end" | "space-evenly unsafe center" | "space-evenly safe start" | "space-evenly safe end" | "space-evenly safe center" | "space-evenly stretch" | "space-evenly space-between" | "space-evenly space-around" | "space-evenly space-evenly"Default: 'normal normal'Default: 'normal normal'requiredrequired
A shorthand property for
justify-contentandalign-content.- Anchor to gapgapgapMaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>Default: 'none'Default: 'none'requiredrequired
Adjusts spacing between elements.
Accepts:
- A single
value applied to both axes, such aslarge-100 - A pair of values, such as
large-100 large-500, to set the inline and block axes respectively - A responsive value string with the supported SpacingKeyword as a query value
- A single
- Anchor to rowGaprowGaprowGapMaybeResponsive<"" | SpacingKeyword>MaybeResponsive<"" | SpacingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
s spacing between elements in the block axis. This overrides the row value of
gap.Accepts:
- A single
value, such aslarge-100 - A responsive value string with the supported SpacingKeyword as a query value
- A single
- Anchor to columnGapcolumnGapcolumnGapMaybeResponsive<"" | SpacingKeyword>MaybeResponsive<"" | SpacingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
Adjusts spacing between elements in the inline axis. This overrides the column value of
gap.Accepts:
- A single
value, such aslarge-100 - A responsive value string with the supported SpacingKeyword as a query value
- A single
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleAccessibilityRoleAccessibilityRoleDefault: 'generic'Default: 'generic'requiredrequired
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 backgroundbackgroundbackgroundBackgroundColorKeywordBackgroundColorKeywordDefault: 'transparent'Default: 'transparent'requiredrequired
The background color of the component.
- Anchor to blockSizeblockSizeblockSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'requiredrequired
The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).
Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions.
Learn more about block-size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'requiredrequired
The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.
Learn more about min-block-size.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'requiredrequired
The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.
Learn more about max-block-size.
- Anchor to inlineSizeinlineSizeinlineSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'requiredrequired
The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about inline-size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'requiredrequired
The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.
Learn more about min-inline-size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'requiredrequired
The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.
Learn more about max-inline-size.
- Anchor to overflowoverflowoverflow"visible" | "hidden""visible" | "hidden"Default: 'visible'Default: 'visible'requiredrequired
The overflow behavior of the element.
visible: the content that extends beyond the element’s container is visible.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.
- Anchor to paddingpaddingpaddingMaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>Default: 'none'Default: 'none'requiredrequired
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. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
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. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStartMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The block-start padding (top in horizontal writing modes).
Overrides the block-start value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEndMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The block-end padding (bottom in horizontal writing modes).
Overrides the block-end value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
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. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStartMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The inline-start padding (left in LTR writing modes, right in RTL).
Overrides the inline-start value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEndMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The inline-end padding (right in LTR writing modes, left in RTL).
Overrides the inline-end value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to borderborderborderBorderShorthandBorderShorthandDefault: 'none' - equivalent to `none base auto`.Default: 'none' - equivalent to `none base auto`.requiredrequired
A border applied using shorthand syntax to specify width, color, and style in a single property.
- Anchor to borderWidthborderWidthborderWidth"" | MaybeAllValuesShorthandProperty<"small" | "small-100" | "base" | "large" | "large-100" | "none">"" | MaybeAllValuesShorthandProperty<"small" | "small-100" | "base" | "large" | "large-100" | "none">Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The thickness of the border on all sides. When set, this overrides the width value specified in the
borderproperty.- Anchor to borderStyleborderStyleborderStyle"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
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.- Anchor to borderColorborderColorborderColor"" | ColorKeyword"" | ColorKeywordDefault: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The color of the border using the design system's color scale. When set, this overrides the color value specified in the
borderproperty.- Anchor to borderRadiusborderRadiusborderRadiusMaybeAllValuesShorthandProperty<BoxBorderRadii>MaybeAllValuesShorthandProperty<BoxBorderRadii>Default: 'none'Default: 'none'requiredrequired
The roundedness of the element's corners using the design system's radius scale.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstringrequiredrequired
A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibility"visible" | "hidden" | "exclusive""visible" | "hidden" | "exclusive"Default: 'visible'Default: 'visible'requiredrequired
The visibility mode of the element for both visual and assistive technology users.
visible: The element is visible to all users (both sighted users and screen readers).hidden: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.exclusive: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
- Anchor to displaydisplaydisplayMaybeResponsive<"auto" | "none">MaybeResponsive<"auto" | "none">Default: 'auto'Default: 'auto'requiredrequired
The outer display type of the component. The outer type sets a component's participation in flow layout.
autothe component's initial value. The actual value depends on the component and context.nonehides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
JustifyItemsKeyword
Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. Learn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).
'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPositionBaselinePosition
Represents baseline alignment positions used to align items relative to their baselines. - `baseline`: Aligns to the baseline of the parent. - `first baseline`: Aligns to the first baseline of the parent. - `last baseline`: Aligns to the last baseline of the parent.
'baseline' | 'first baseline' | 'last baseline'OverflowPosition
Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.
`unsafe ${ContentPosition}` | `safe ${ContentPosition}`ContentPosition
Defines the position of content along an axis. - `center`: Centers the content. - `start`: Aligns content to the start. - `end`: Aligns content to the end.
'center' | 'start' | 'end'AlignItemsKeyword
Align items sets the align-self value on all direct children as a group. Learn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPositionJustifyContentKeyword
Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. Learn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
'normal' | ContentDistribution | OverflowPosition | ContentPositionContentDistribution
Defines how space is distributed between and around content items in flex and grid layouts. - `space-between`: Distributes items evenly with the first item at the start and last at the end. - `space-around`: Distributes items evenly with equal space around each item. - `space-evenly`: Distributes items evenly with equal space between them. - `stretch`: Stretches items to fill the container.
'space-between' | 'space-around' | 'space-evenly' | 'stretch'AlignContentKeyword
Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis. Learn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPositionMaybeResponsive
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}`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}`SpacingKeyword
Defines the spacing size between elements, using the standard size scale or `none` for no spacing.
SizeKeyword | 'none'SizeKeyword
Defines component sizes using a consistent scale from extra small to extra large. - `small-500` through `small-100`: Extra small to small sizes, progressively increasing. - `small`: Standard small size. - `base`: Default medium size that works well in most contexts. - `large`: Standard large size. - `large-100` through `large-500`: Large to extra large sizes, progressively increasing.
'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'AccessibilityRole
Defines the semantic role of a component for assistive technologies like screen readers. Accessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation. Use these roles to: - Improve navigation for screen reader users - Provide semantic structure to your UI - Ensure proper interpretation by assistive technologies Learn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs. - `main`: Indicates the primary content area of the page. - `header`: Marks a component as a header containing introductory content or navigation. - `footer`: Designates content containing information like copyright, navigation links, or privacy statements. - `section`: Defines a generic thematic grouping of content that should have a heading or accessible label. - `aside`: Marks supporting content that relates to but is separate from the main content. - `navigation`: Identifies major groups of navigation links for moving around the site or page. - `ordered-list`: Represents a list where the order of items is meaningful. - `list-item`: Identifies an individual item within a list. - `list-item-separator`: Acts as a visual and semantic divider between items in a list. - `unordered-list`: Represents a list where the order of items is not meaningful. - `separator`: Creates a divider that separates and distinguishes sections of content. - `status`: Defines a live region for advisory information that is not urgent enough to be an alert. - `alert`: Marks important, time-sensitive information that requires the user's immediate attention. - `generic`: Creates a semantically neutral container element with no inherent meaning. - `presentation`: Removes semantic meaning from an element while preserving its visual appearance. - `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.
'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'BackgroundColorKeyword
Defines the background color intensity or emphasis level for UI elements. - `transparent`: No background, allowing the underlying surface to show through. - `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.
'transparent' | ColorKeywordColorKeyword
Defines the color intensity or emphasis level for text and UI elements. - `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements. - `base`: Primary color for body text, standard UI elements, and general content with good readability. - `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.
'subdued' | 'base' | 'strong'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.
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`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.
SizeUnits | 'none'MaybeAllValuesShorthandProperty
Represents CSS shorthand properties that accept one to four values. 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}`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'BorderShorthand
Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.
BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`BorderSizeKeyword
Defines the width of borders, using the standard size scale or `none` for no border. - `SizeKeyword`: Standard border widths from the size scale for consistent thickness. - `none`: No border width (removes the border).
SizeKeyword | 'none'BorderStyleKeyword
Defines the visual style of borders. - `none`: No border is displayed. - `solid`: A single solid line. - `dashed`: A series of short dashes. - `dotted`: A series of dots. - `auto`: Automatically determined based on context.
'none' | 'solid' | 'dashed' | 'dotted' | 'auto'BoxBorderStyles
Represents the subset of border style values supported by the box component. - `auto`: Default border style determined by the system. - `none`: No border style (removes the border). - `solid`: Continuous line border. - `dashed`: Border made up of dashes.
'auto' | 'none' | 'solid' | 'dashed'BoxBorderRadii
Represents the subset of border radius values supported by the component. - `small-200`: Extra small radius for subtle rounding. - `small-100`: Small radius for minimal corner rounding. - `small`: Standard small radius. - `base`: Medium radius for moderate corner rounding. - `large`: Standard large radius for pronounced rounding. - `large-100`: Large radius for more prominent corner rounding. - `large-200`: Extra large radius for maximum rounding. - `none`: No border radius (sharp corners).
'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'Anchor to SlotsSlots
The grid component supports slots for additional content placement within the component. Learn more about using slots.
- Anchor to childrenchildrenchildrenHTMLElementHTMLElement
The child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing.
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 gridColumngridColumngridColumn"auto" | `span ${number}`"auto" | `span ${number}`Default: 'auto'Default: 'auto'requiredrequired
The number of columns the item will span across.
Learn more about the grid-column property.
- Anchor to gridRowgridRowgridRow"auto" | `span ${number}`"auto" | `span ${number}`Default: 'auto'Default: 'auto'requiredrequired
The number of rows the item will span across.
Learn more about the grid-row property.
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleAccessibilityRoleAccessibilityRoleDefault: 'generic'Default: 'generic'requiredrequired
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 backgroundbackgroundbackgroundBackgroundColorKeywordBackgroundColorKeywordDefault: 'transparent'Default: 'transparent'requiredrequired
The background color of the component.
- Anchor to blockSizeblockSizeblockSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'requiredrequired
The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).
Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions.
Learn more about block-size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'requiredrequired
The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.
Learn more about min-block-size.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'requiredrequired
The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.
Learn more about max-block-size.
- Anchor to inlineSizeinlineSizeinlineSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'requiredrequired
The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about inline-size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'requiredrequired
The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.
Learn more about min-inline-size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'requiredrequired
The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.
Learn more about max-inline-size.
- Anchor to overflowoverflowoverflow"visible" | "hidden""visible" | "hidden"Default: 'visible'Default: 'visible'requiredrequired
The overflow behavior of the element.
visible: the content that extends beyond the element’s container is visible.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.
- Anchor to paddingpaddingpaddingMaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>Default: 'none'Default: 'none'requiredrequired
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. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
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. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStartMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The block-start padding (top in horizontal writing modes).
Overrides the block-start value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEndMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The block-end padding (bottom in horizontal writing modes).
Overrides the block-end value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
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. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStartMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The inline-start padding (left in LTR writing modes, right in RTL).
Overrides the inline-start value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEndMaybeResponsive<"" | PaddingKeyword>MaybeResponsive<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The inline-end padding (right in LTR writing modes, left in RTL).
Overrides the inline-end value from
. Also accepts a responsive value string with the supportedas a query value.- Anchor to borderborderborderBorderShorthandBorderShorthandDefault: 'none' - equivalent to `none base auto`.Default: 'none' - equivalent to `none base auto`.requiredrequired
A border applied using shorthand syntax to specify width, color, and style in a single property.
- Anchor to borderWidthborderWidthborderWidth"" | MaybeAllValuesShorthandProperty<"small" | "small-100" | "base" | "large" | "large-100" | "none">"" | MaybeAllValuesShorthandProperty<"small" | "small-100" | "base" | "large" | "large-100" | "none">Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The thickness of the border on all sides. When set, this overrides the width value specified in the
borderproperty.- Anchor to borderStyleborderStyleborderStyle"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>Default: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
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.- Anchor to borderColorborderColorborderColor"" | ColorKeyword"" | ColorKeywordDefault: '' - meaning no overrideDefault: '' - meaning no overriderequiredrequired
The color of the border using the design system's color scale. When set, this overrides the color value specified in the
borderproperty.- Anchor to borderRadiusborderRadiusborderRadiusMaybeAllValuesShorthandProperty<BoxBorderRadii>MaybeAllValuesShorthandProperty<BoxBorderRadii>Default: 'none'Default: 'none'requiredrequired
The roundedness of the element's corners using the design system's radius scale.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstringrequiredrequired
A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibility"visible" | "hidden" | "exclusive""visible" | "hidden" | "exclusive"Default: 'visible'Default: 'visible'requiredrequired
The visibility mode of the element for both visual and assistive technology users.
visible: The element is visible to all users (both sighted users and screen readers).hidden: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.exclusive: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
- Anchor to displaydisplaydisplayMaybeResponsive<"auto" | "none">MaybeResponsive<"auto" | "none">Default: 'auto'Default: 'auto'requiredrequired
The outer display type of the component. The outer type sets a component's participation in flow layout.
autothe component's initial value. The actual value depends on the component and context.nonehides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
Anchor to SlotsSlots
The grid item component supports slots for additional content placement within the component. Learn more about using slots.
- Anchor to childrenchildrenchildrenHTMLElementHTMLElement
The content displayed within the grid item component, which represents a single cell in the grid layout and can span multiple columns or rows.
Anchor to ExamplesExamples
Anchor to Add a grid layout with column spansAdd a grid layout with column spans
Create a grid layout with columns and grid items that span them. This example shows a two-column grid with a full-width header row and two equal columns below.
Preview
html
Anchor to Create a two-column layoutCreate a two-column layout
Create a simple two-column layout. This example uses a 12-column grid system with equal-width columns.
Preview
html
Anchor to Build layouts with column spansBuild layouts with column spans
Use a 12-column grid system with spans to create full-width, half-width, and third-width column arrangements. This example shows multiple rows with progressively narrower columns.
Preview
html
Anchor to Create a responsive grid with container queriesCreate a responsive grid with container queries
Use the gridTemplateColumns property with container queries to automatically adjust the column count based on available width. This example shows a grid that switches from a single column in narrow containers to three columns in wider ones.
Preview
html
Anchor to Best practicesBest practices
- Design for different screen sizes: Layouts that work well on desktop often fail on mobile. Plan how your grid should reflow or reconfigure for smaller screens rather than creating a fixed layout that doesn't adapt.
- Keep spacing consistent: Consistent spacing between grid items creates visual rhythm and makes layouts easier to scan. Avoid mixing different spacing approaches within the same grid.
- Consider content overflow: Grid cells have fixed dimensions, but content length varies. Plan how your layout handles content that's too long or too wide, whether through wrapping, truncation, or scrolling.
- Use semantic alternatives when appropriate: Before using the component, consider whether simpler layout components would work. Grid's power comes with complexity, so use it when you need its specific capabilities.
Anchor to LimitationsLimitations
- The component doesn't support CSS subgrid for aligning nested grid tracks with parent grids. If you need nested grids to align with parent grid lines, you'll need to manually coordinate the sizing or use a different layout approach.