Skip to content

PigmentGrid API

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

Demos

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
childrennode-

The content of the component.

columnsArray<number>
| number
| object		12

The number of columns.

columnSpacingArray<number
| string>
| number
| object
| string		-

Defines the horizontal space between the type item components. It overrides the value of the spacing prop.

containerboolfalse

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.

offsetArray<number>
| number
| object		-

Defines the offset of the grid.

rowSpacingArray<number
| string>
| number
| object
| string		-

Defines the vertical space between the type item components. It overrides the value of the spacing prop.

sizeArray<number>
| number
| object		-

Defines the column size of the grid.

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

Source code

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