EDS4 logo
@eds/grid
v4.0.10

Grid

A CSS grid version of the Box component.
Prop
Required
Description
Type
as

ElementType<any>
ref

MutableRefObject
color

The color property sets the text color of an element.

"themePrimaryBase" | "themePrimary100" | "themePrimary200" | "themePrimary300" | "themePrimary400" | "themePrimary500" | "themePrimary600" | "themeAccentBase" | "themeAccent100" | "themeAccent200" | "themeAccent300" | "themeAccent400" | "themeAccent500" | "themeAccent600" | "neutralSubtle" | "neutralBold" | "neutralBoldInverted" | "neutralDisabled" | "positive" | "informative" | "caution" | "critical"Supports responsive prop syntax
height

The height property sets an element's height.

width

The width property sets an element's width.

minHeight

The minHeight property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for minHeight.

minWidth

The minWidth property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for minWidth.

maxHeight

The maxHeight CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for maxHeight.

maxWidth

The maxWidth CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by maxWidth.

position

The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky"Supports responsive prop syntax
top

The top property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

right

The right property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

bottom

The bottom property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

left

The left property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

zIndex

The zIndex property sets the "z-order" of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

"menu" | "card" | "dropdown" | "blanket" | "modal" | "toast"Supports responsive prop syntax
scrollMarginTop

The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

string | number
transform

The transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none"Supports responsive prop syntax
gridTemplateColumns

The gridTemplateColumns CSS property defines the line names and track sizing functions of the grid columns.

gridTemplateRows

The gridTemplateRows CSS property defines the line names and track sizing functions of the grid rows.

gridTemplateAreas

The gridTemplateAreas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none"Supports responsive prop syntax
gridTemplate

The gridTemplate CSS property is a shorthand property for defining grid columns, rows, and areas.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none"Supports responsive prop syntax
gridAutoColumns

The gridAutoColumns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

gridAutoRows

The gridAutoRows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.

gridAutoFlow

The gridAutoFlow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "dense" | "row"Supports responsive prop syntax
grid

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none"Supports responsive prop syntax
gridRowStart

The gridRowStart CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
gridColumnStart

The gridColumnStart CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
gridRowEnd

The gridRowEnd CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
gridColumnEnd

The gridColumnEnd CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
gridRow

The gridRow CSS shorthand property specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
gridColumn

The gridColumn CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
gridArea

The gridArea CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"Supports responsive prop syntax
margin

The margin shorthand property sets the margin area on all four sides of an element at once.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
marginTop

The marginTop property sets the margin area on the top side of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
marginRight

The marginRight property sets the margin area on the right side of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
marginBottom

The marginBottom property sets the margin area on the bottom side of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
marginLeft

The marginLeft property sets the margin area on the left side of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
marginY

The marginY shorthand property sets the margin area on the top and bottom of the element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
marginX

The marginY shorthand property sets the margin area on the left and right of the element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
padding

The padding shorthand property sets the padding area on all four sides of an element at once.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
paddingTop

The paddingTop property sets the height of the padding area on the top of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
paddingRight

The paddingRight property sets the width of the padding area on the right of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
paddingBottom

The paddingBottom property sets the height of the padding area on the bottom of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
paddingLeft

The paddingLeft property sets the width of the padding area on the left of an element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
paddingY

The paddingY shorthand property sets the padding area on the top and bottom of the element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
paddingX

The paddingX shorthand property sets the padding area on the left and right of the element.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
fontFamily

fontSize

"small" | "xsmall" | "medium" | "large" | "xlarge" | "xxsmall" | "xxlarge" | "standard"Supports responsive prop syntax
fontWeight

"medium" | "regular" | "bold"Supports responsive prop syntax
lineHeight

"nospace" | "tight" | "loose"Supports responsive prop syntax
containerType

Declare container type

"size" | "inline-size"
backgroundColor

The backgroundColor property sets the background color of an element.

"input" | "themePrimaryBase" | "themePrimary100" | "themePrimary200" | "themePrimary300" | "themePrimary400" | "themePrimary500" | "themePrimary600" | "themeAccentBase" | "themeAccent100" | "themeAccent200" | "themeAccent300" | "themeAccent400" | "themeAccent500" | "themeAccent600" | "neutralSubtle" | "neutralBold" | "neutralDisabled" | "neutral" | "neutralInverted" | "neutralHover" | "neutralPressed" | "inputDisabled" | "positiveSubtle" | "positiveBold" | "informativeSubtle" | "informativeBold" | "cautionSubtle" | "cautionBold" | "criticalSubtle" | "criticalBold" | "criticalBoldHover" | "criticalBoldPressed"Supports responsive prop syntax
borderColor

The border property sets the color of an element's border.

"input" | "themePrimaryBase" | "themePrimary100" | "themePrimary200" | "themePrimary300" | "themePrimary400" | "themePrimary500" | "themePrimary600" | "themeAccentBase" | "themeAccent100" | "themeAccent200" | "themeAccent300" | "themeAccent400" | "themeAccent500" | "themeAccent600" | "neutralSubtle" | "neutralBold" | "neutralBoldInverted" | "neutralDisabled" | "positive" | "informative" | "caution" | "critical" | "inputCritical"Supports responsive prop syntax
borderRadius

The borderRadius property rounds the corners of an element's outer border edge.

"small" | "medium" | "large" | "xlarge" | "none" | "full"Supports responsive prop syntax
borderStyle

The borderStyle property controls what style the border is displayed in

"solid" | "dashed"
borderWidth

The borderWidth shorthand property sets the width of an element's border.

boxShadow

The boxShadow property adds shadow effects around an element's frame.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "none"Supports responsive prop syntax
className

The className prop can be used to add CSS classes to the box.

string
cursor

The cursor property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.

"progress" | "text" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "none" | "-moz-grab" | "-webkit-grab" | "alias" | "all-scroll" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out"Supports responsive prop syntax
overflow

The overflow shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "-moz-hidden-unscrollable" | "clip" | "hidden" | "scroll" | "visible"Supports responsive prop syntax
overflowX

The overflowY property sets what shows when content overflows a block-level element's left and right edges.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "-moz-hidden-unscrollable" | "clip" | "hidden" | "scroll" | "visible"Supports responsive prop syntax
overflowY

The overflowY property sets what shows when content overflows a block-level element's top and bottom edges.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "-moz-hidden-unscrollable" | "clip" | "hidden" | "scroll" | "visible"Supports responsive prop syntax
overflowWrap

Configures the wrapping behaviour for overflowing content

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "anywhere" | "break-word" | "normal"Supports responsive prop syntax
hyphens

Configures the hyphen behaviour for overflowing content

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "none" | "manual"Supports responsive prop syntax
userSelect

The userSelect property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.

"text" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "none" | "-moz-none" | "all" | "contain" | "element"Supports responsive prop syntax
alignContent

The alignContent property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline"Supports responsive prop syntax
alignItems

The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start"Supports responsive prop syntax
alignSelf

The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start"Supports responsive prop syntax
textAlign

The textAlign property specifies the horizontal alignment of text in an element. It also allows the centering of elements inside a Box while preserving the display: block property

"right" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "center" | "end" | "start" | "-webkit-match-parent" | "justify" | "match-parent"Supports responsive prop syntax
gap

The gap property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
columnGap

The columnGap property sets the gaps (gutters) between columns.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
rowGap

The rowGap property sets the gaps (gutters) between rows.

"small" | "xsmall" | "medium" | "large" | "xlarge" | "auto" | "none" | "xxsmall" | "xxlarge"Supports responsive prop syntax
justifyContent

The justifyContent property 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.

"right" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start"Supports responsive prop syntax
order

The order property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"Supports responsive prop syntax
inline

Display as an inline-level grid container.

boolean