grid

Grid

A grid system for laying out content. To use, define the rows and columns, create area names for adjacent cells, and then place Box components inside those areas using the gridArea property. See https://css-tricks.com/snippets/css/complete-guide-grid/. The availability of Grid can be tested via Grid.available. Use this to create fallback rendering for older browsers, like ie11.

Usage

import { Grid } from 'grommet';
<Grid />

Properties

a11yTitle

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

string

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

gridArea

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

string

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.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  end: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  start: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

align

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

start
center
end
stretch

alignContent

How to align the contents along the column axis.

start
center
end
between
around
stretch

areas

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

[{
  name: string,
  start: [number],
  end: [number]
}]
[[string]]

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
    full
    1/2
    1/3
    2/3
    1/4
    2/4
    3/4
    flex
    auto
    string
  ]
  xsmall
  small
  medium
  large
  xlarge
  full
  1/2
  1/3
  2/3
  1/4
  2/4
  3/4
  flex
  auto
  string
]
xsmall
small
medium
large
xlarge
{
  count: 
    fit
    fill
    number,
  size: 
    xsmall
    small
    medium
    large
    xlarge
    [xsmall
small
medium
large
xlarge
full
1/2
1/3
2/3
1/4
2/4
3/4
flex
auto]
    string
}
string

fill

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

horizontal
vertical
boolean

gap

Gap sizes between rows and/or columns.

xxsmall
xsmall
small
medium
large
xlarge
none
{
  row: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    none
    string,
  column: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    none
    string
}
string

justify

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

start
center
end
stretch

justifyContent

How to align the contents along the row axis.

start
center
end
between
around
stretch

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 Defaults to none.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  end: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  start: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

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
    full
    1/2
    1/3
    2/3
    1/4
    2/4
    3/4
    flex
    auto
    string
  ]
  xsmall
  small
  medium
  large
  xlarge
  full
  1/2
  1/3
  2/3
  1/4
  2/4
  3/4
  flex
  auto
  string
]
xsmall
small
medium
large
xlarge
string

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

as

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

string
function

Intrinsic element

div

Theme

global.size

The possible sizes for row and column. Expects object.

Defaults to

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

grid.extend

Any additional style for the Grid. Expects string | (props) => {}.

Defaults to

undefined

global.edgeSize

The possible sizes for the grid margin and gap. Expects object.

Defaults to

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