Grid

Grid

Props

Name Type Default Description
alignContent enum: 'stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'
'stretch' Defines the align-content style property. It's applied for all screen sizes.
alignItems enum: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline'
'stretch' Defines the align-items style property. It's applied for all screen sizes.
children node The content of the component.
classes object Override or extend the styles applied to the component. See CSS API below for more details.
component union: string |
 func
'div' The component used for the root node. Either a string to use a DOM element or a component.
container bool false If true, the component will have the flex container behavior. You should be wrapping items with a container.
direction enum: 'row' |
 'row-reverse' |
 'column' |
 'column-reverse'
'row' Defines the flex-direction style property. It is applied for all screen sizes.
item bool false If true, the component will have the flex item behavior. You should be wrapping items with a container.
justify enum: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'
'flex-start' Defines the justify-content style property. It is applied for all screen sizes.
lg enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
false Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens if not overridden.
md enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
false Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden.
sm enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
false Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden.
spacing enum: 0, 8, 16, 24, 32, 40
0 Defines the space between the type item component. It can only be used on a type container component.
wrap enum: 'nowrap' |
 'wrap' |
 'wrap-reverse'
'wrap' Defines the flex-wrap style property. It's applied for all screen sizes.
xl enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
false Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens.
xs enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
false Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.
zeroMinWidth bool false If true, it sets min-width: 0 on the item. Refer to the limitations section of the documentation to better understand the use case.

Any other properties supplied will be spread to the root element.

CSS API

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

  • container
  • item
  • zeroMinWidth
  • direction-xs-column
  • direction-xs-column-reverse
  • direction-xs-row-reverse
  • wrap-xs-nowrap
  • wrap-xs-wrap-reverse
  • align-items-xs-center
  • align-items-xs-flex-start
  • align-items-xs-flex-end
  • align-items-xs-baseline
  • align-content-xs-center
  • align-content-xs-flex-start
  • align-content-xs-flex-end
  • align-content-xs-space-between
  • align-content-xs-space-around
  • justify-xs-center
  • justify-xs-flex-end
  • justify-xs-space-between
  • justify-xs-space-around
  • spacing-xs-8
  • spacing-xs-16
  • spacing-xs-24
  • spacing-xs-32
  • spacing-xs-40
  • grid-xs
  • grid-xs-1
  • grid-xs-2
  • grid-xs-3
  • grid-xs-4
  • grid-xs-5
  • grid-xs-6
  • grid-xs-7
  • grid-xs-8
  • grid-xs-9
  • grid-xs-10
  • grid-xs-11
  • grid-xs-12

Have a look at overriding with classes section and the implementation of the component for more detail.

If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiGrid.

Demos