Module: Grid

A grid component in react.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`alignItems`	string	The `align-items` CSS property, only applies if grid is container.
`children`	JSX.Element \| null	The React children to contain in the grid component.
`columns`	number	Number of grid columns. Enables CSS Grid mode when set.
`columnSpacing`	number	The column spacing between grid items.
`container`	boolean	Whether the grid component is a container or not.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`direction`	string	The `flex-direction` CSS property, only applies if grid is container.
`elementType`	string	The element type, one of `list` or `div`.
`gap`	number	Gap spacing using design token spacers (2, 3, 4, 5, 6, 8). Best used with CSS Grid mode.
`item`	boolean	Whether the grid component is an item or not.
`justifyContent`	string	The `justify-content` CSS property, only applies if grid is container.
`rowSpacing`	number	The row spacing between grid items.
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`span`	number	Number of columns to span in CSS Grid mode.
`type`	string	The grid type, one of `fixed` or `fluid`, only applies if grid is container.
`width`	number	The width of the grid item in a 12-column grid, from 1 to 12.
`wrap`	boolean	Whether to wrap grid items or not, only applies if grid is container.

ref

object | null

Ref to the component.

Since: 1.1.18
Source: elements/Grid/index.js, line 6

Returns:

The functional grid component in React.

Type:: JSX.Element

Example

import Grid from '@gravityforms/components/react/admin/elements/Grid';

return (
    <Grid container columnSpacing={ 4 } rowSpacing={ 4 }>
        <Grid item>
            { 'Grid item 1' }
        </Grid>
        <Grid item>
            { 'Grid item 2' }
        </Grid>
        <Grid item>
            { 'Grid item 3' }
        </Grid>
    </Grid>
);