Grid

a grid system for laying out content

Storybook

CodeSandbox

Github

Using Grommet for HPE?See Grid examples and guidance.

Props

a11yTitle

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

string

"a user friendly label for screen readers"

align

How to align the contents along the cross axis. Any 'align-items' valid CSS value is accepted, including composed ones such 'first baseline' and 'unsafe start'.

string

"start"

"center"

"end"

"baseline"

"stretch

alignContent

How to align the contents when there is extra space in the cross axis. Any 'align-content' valid CSS value is accepted, including composed ones such 'first baseline' and 'unsafe start'.

string

"around"

"baseline"

"between"

"center"

"evenly"

"end"

"start"

"stretch"

"string"

alignSelf

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

string

"start"

"center"

"end"

"stretch"

"baseline"

areas

Grid areas.

array[object]

Area names and column,row coordinates.


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

array[array[string]]

An array of string arrays that specify named grid areas.


[
  ["header"],
]

as

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

string

The name of a component.

"div"

function

() => {}

border

Include a border.

boolean

true

false

string

"top"

"left"

"bottom"

"right"

"start"

"end"

"horizontal"

"vertical"

"all"

object


{
  color: string | { dark: string, light: string },
  size: "medium",
  style: "solid",
  side: "all"
}

array

An array of objects defining the border for different sides.


[
  {
    color: "black",
    size: "small",
    style: "solid",
    side: "top"
  },
  {
    color: "black",
    size: "medium",
    style: "dotted",
    side: "bottom"
  }
]

where size could be:

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

where style could be:

"solid"

"dashed"

"dotted"

"double"

"groove"

"ridge"

"inset"

"outset"

"hidden"

where side could be:

"top"

"left"

"bottom"

"right"

"horizontal"

"vertical"

"all"

columns

Column sizes.

string

Specifying a single string will repeat multiple columns of that size, as long as there is room for more.

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

array

If an array value is an array, the inner array indicates the minimum and maximum sizes for the column.

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

object

Specifying an object allows indicating how the columns stretch to fit the available space.

{ count: "fit", size: "..." }

where count could be:

"fit"

"fill"

fill

Whether the width and/or height should fill the container.

string

"horizontal"

"vertical"

boolean

true

false

gap

Gap sizes between rows and/or columns.

string

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"none"

object


{
  row: "small",
  column: "medium"
}

gridArea

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

string

"a parent grid area name"

height

A fixed height.

string

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"string"

object


{
  height: "..."
  min: "..."
  max: "..."
}

justify

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

string

"start"

"center"

"end"

"stretch"

justifyContent

How to align the contents along the row axis.

string

"start"

"center"

"end"

"between"

"around"

"stretch"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

pad

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

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

responsive

Whether margin and pad sizes should be scaled for mobile environments.

boolean

true

false

rows

Row sizes.

string

Specifying a single string will cause automatically added rows to be the specified size.

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

array

If an array value is an array, the inner array indicates the minimum and maximum sizes for the row.

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

The name of a component.

"div"

function

() => {}

width

A fixed width.

string

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"string"

object


{
  width: "..."
  min: "..."
  max: "..."
}

React/DOM Properties

At its core, the Grid component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.size

The possible sizes for row and column.

object


{
  xxsmall: "48px",
  xsmall: "96px",
  small: "192px",
  medium: "384px",
  large: "768px",
  xlarge: "1152px",
  xxlarge: "1536px",
  full: "100%",
}

grid.extend

Any additional style for the Grid.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

global.edgeSize

The possible sizes for the grid margin and gap.

object


    {
      none: '0px',
      hair: '1px',
      xxsmall: '3px',
      xsmall: '6px',
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
      responsiveBreakpoint: 'small'
    }