@element-public/react-grid NPM

Grid

Description

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

See live demos on storybook

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.

clsx prop-types @babel/runtime-corejs3 @element-public/react-common

@element-public/react-components

1.0.0

1 year ago