Pular para o conteúdo

Grid API

Documentação da API para o componente React Grid . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Grid from '@mui/system/Unstable_Grid/Grid.tsx/Grid';
// ou
import { Grid } from '@mui/system/Unstable_Grid/Grid.tsx';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
childrennode
O conteúdo do componente.
columnsArray<number>
| number
| object
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-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object
Defines the flex-direction style property. It is applied for all screen sizes.
disableEqualOverflowboolfalse
If true, the negative margin and padding are apply only to the top and left sides of the grid.
lg'auto'
| number
| bool
Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens if not overridden.
lgOffset'auto'
| number
If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the lg breakpoint and wider screens if not overridden.
md'auto'
| number
| bool
Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden.
mdOffset'auto'
| number
If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the md breakpoint and wider screens if not overridden.
rowSpacingArray<number
| string>
| number
| object
| string
Defines the vertical space between the type item components. It overrides the value of the spacing prop.
sm'auto'
| number
| bool
Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden.
smOffset'auto'
| number
If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the sm breakpoint and wider screens if not overridden.
spacingArray<number
| string>
| number
| object
| string
Defines the space between the type item components. It can only be used on a type container component.
wrap'nowrap'
| 'wrap-reverse'
| 'wrap'
Defines the flex-wrap style property. It's applied for all screen sizes.
xl'auto'
| number
| bool
Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens.
xlOffset'auto'
| number
If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the xl breakpoint and wider screens if not overridden.
xs'auto'
| number
| bool
Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.
xsOffset'auto'
| number
If a number, it sets the margin-left equals to the number of columns the grid item uses. If 'auto', the grid item push itself to the right-end of the container. The value is applied for the xs breakpoint and wider screens if not overridden.

Como um utilitário CSS, o componente Grid também suporta todas as propriedades do sistema . Você pode usá-los como "props" diretamente no componente.

O ref é encaminhado para o elemento raiz.

Demonstrações