Grid

Description

The Element Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

See live demos on storybook

Storybook Grid Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-grid @element/themes

Notes

Different variations of Grid exist for different use cases. Variations include Grid with Column Spacing, Grid with Custom Ordered Columns, and a Full Height Grid. In general, Grid is an effective tool for organizing content in specifically styled or labeled columns to improve a user's experience.

Breakpoints

| Range | Columns | Gutter | Standard Margin | Airy Margin | Device | Viewports | | --------- | ------- | ------ | --------------- | ----------- | ------- | ----------- | | 0-599 | 4 | 16 | 16 | 16 | Mobile | 320,260,414 | | 600-719 | 8 | 16 | 16 | 32 | Tablet | 600 | | 720-839 | 8 | 24 | 24 | 32 | Tablet | 768,800 | | 840-1023 | 12 | 24 | 24 | 48 | Desktop | 960 | | 1024-1439 | 12 | 24 | 24 | 64 | Desktop | 1024,1280 | | 1440+ | 12 | 24 | 24 | 80 | Desktop | 1440,1600 |

Grid Props

| Name | Type | Default | Required | Description | | ----------- | -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. | | columnGap | string|number | '16px' | false | Sets the column gap for the grid. | | fullHeight | boolean | null | false | Applies 100% height to the grid and direct children rows. Useful when creating a page layout. Be aware all direct children rows will have a 100% height. | | fullWidth | boolean | null | false | Applies 100% width to the grid and direct children rows. Useful to maintain full width in a flex container. | | gridAlign | string | 'center' | false | Alignment of entire grid: left and right.Accepted Values: center, left, right | | rowGap | string|number | '16px' | false | Sets the row gap for the grid. | | style | object | undefined | false | Styles for the grid. | | useMaxWidth | boolean | false | false | If true the grid will have a max width according to your theme's breakpoints. | | variant | string | 'standard' | false | Select airy or standard padding.Accepted Values: standard, airy, none |

Grid Deprecated Props

| Name | Type | Default | Required | Deprecated | Description | | ---- | ------- | --------- | -------- | ----------------------------- | ------------------------------------- | | airy | boolean | undefined | false | Use variant='airy' instead. | Applies extra padding to each column. |

Grid Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | --------------------------- | | children | React.ReactNode | null | true | Accepts GridCol or GridRow. |

Grid Col Props

| Name | Type | Default | Required | Description | | --------------- | -------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | align | string | undefined | false | Alignment of cell within the row: top, middle, bottom. If omitted the col will stretch to the height of the row.Accepted Values: top, middle, bottom | | className | string | undefined | false | The css class name to be passed through to the component markup. | | desktopCol | number | null | false | Specifies the number of columns the cell spans. | | gridColStart | string|number | null | false | Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. Set to any valid grid-column-start. | | horizontalAlign | string | 'left' | false | Horizontal alignment of the cell contents of cell content: top, middle, bottom.Accepted Values: left, center, right | | order | number | null | false | Specifies the order of the cell. | | phoneCol | number | null | false | Specifies the number of columns the cell spans on a phone. | | style | object | undefined | false | Styles for the grid. | | tabletCol | number | null | false | Specifies the number of columns the cell spans on a tablet. | | verticalAlign | string | 'top' | false | Vertical alignment of cell content: top, middle, bottom.Accepted Values: top, middle, bottom |

Grid Col Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | -------------------------------------------------------------------- | | children | React.ReactNode | null | false | Content to be rendered inside the GridCol. Accepts any valid markup. |

Grid Row Props

| Name | Type | Default | Required | Description | | --------- | ------ | --------- | -------- | ---------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. | | style | object | undefined | false | Styles for the grid. |

Grid Row Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | -------------------------------------------------------------------- | | children | React.ReactNode | null | true | Content to be rendered inside the GridRow. Accepts any valid markup. |