PigmentGrid API

API reference docs for the React PigmentGrid component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

import PigmentGrid from '@mui/material/PigmentGrid';
// or
import { PigmentGrid } from '@mui/material';

Name	Type	Default	Description
children	node	-	The content of the component.
columns	Array<number> \| number \| object	12	The number of columns.
columnSpacing	Array<number \| string> \| number \| object \| string	-	Defines the horizontal space between the type `item` components. It overrides the value of the `spacing` prop.
container	bool	false	If `true`, the component will have the flex container behavior. You should be wrapping items with a container.
direction	'column' \| 'column-reverse' \| 'row' \| 'row-reverse' \| Array<'column' \| 'column-reverse' \| 'row' \| 'row-reverse'> \| object	'row'	Defines the `flex-direction` style property. It is applied for all screen sizes.
offset	Array<number> \| number \| object	-	Defines the offset of the grid.
rowSpacing	Array<number \| string> \| number \| object \| string	-	Defines the vertical space between the type `item` components. It overrides the value of the `spacing` prop.
size	Array<number> \| number \| object	-	Defines the column size of the grid.
spacing	Array<number \| string> \| number \| object \| string	0	Defines the space between the type `item` components. It can only be used on a type `container` component.
wrap	'nowrap' \| 'wrap-reverse' \| 'wrap'	'wrap'	Defines the `flex-wrap` style property. It's applied for all screen sizes.

The component cannot hold a ref.

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.