Grid API
Documentação da API para o componente React Grid . Aprenda sobre as propriedades disponíveis e a API CSS.
Demonstrações
For examples and details on the usage of this React component, visit the component demo pages:
Importação
import Grid from '@mui/system/Unstable_Grid/Grid.tsx/Grid';
// ou
import { Grid } from '@mui/system/Unstable_Grid/Grid.tsx';Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | node | O conteúdo do componente. | |
| columns | Array<number> | number | object | 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-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. | |
| disableEqualOverflow | bool | false | 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. | |
| rowSpacing | Array<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. | |
| spacing | Array<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.