grommet
components

Grid

a grid system for laying out content

Storybook
CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

align

How to align the individual items inside the grid when there is extra space in the column axis.

"start""center""end""stretch"

alignContent

How to align the contents along the column axis.
"start""center""end""between""around""stretch"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

areas

Grid areas. Either area names and column,row coordinates. Or, an array of string arrays that specify named grid areas.

{
  "name": "header",
  "start": [0, 0],
  "end": [0, 2]
}

as

The DOM tag or react component to use for the element.
"string""function"

columns

Column sizes. If an array value is an array, the inner array indicates the minimum and maximum sizes for the column. Specifying a single string will repeat multiple columns of that size, as long as there is room for more. Specifying an object allows indicating how the columns stretch to fit the available space.

"xsmall"
"small"
"medium"
"large"
"xlarge"
"any CSS size"
["small", "..."]
[["small", "medium"], "..."]
{"count": "fit", "size": "..."}
where count could be:"fit""fill"
where array values could be:"xsmall""small""medium""large""xlarge""full""flex""auto""1/2""1/3""2/3""1/4""2/4""3/4"

fill

Whether the width and/or height should fill the container.
"horizontal""vertical"truefalse

gap

Gap sizes between rows and/or columns.
"small"
"medium"
"large"
"none"
"any CSS size"
{"row": "...", "column": "..."}

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

justify

How to align the individual items inside the grid when there is extra space in the row axis.

"start""center""end""stretch"

justifyContent

How to align the contents along the row axis.
"start""center""end""between""around""stretch"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

rows

Row sizes. If an array value is an array, the inner array indicates the minimum and maximum sizes for the row. Specifying a single string will cause automatically added rows to be the specified size.

"xsmall"
"small"
"medium"
"large"
"xlarge"
"any CSS size"
["small", "..."]
[["small", "medium"], "..."]
where array values could be:"xsmall""small""medium""large""xlarge""full""flex""auto""1/2""1/3""2/3""1/4""2/4""3/4"

tag

The DOM tag to use for the element. NOTE: This is deprecated in favor of indicating the DOM tag via the 'as' property.

"string""function"

Theme

global.size

The possible sizes for row and column.
{
  "xxsmall": "48px",
  "xsmall": "96px",
  "small": "192px",
  "medium": "384px",
  "large": "768px",
  "xlarge": "1152px",
  "xxlarge": "1536px",
  "full": "100%"
}

grid.extend

Any additional style for the Grid.
"any CSS"
(props) => {}

global.edgeSize

The possible sizes for the grid margin and gap.
{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}