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 bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-grid @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

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. | | 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. |

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. |