Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

grid

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
7,021
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
SIZE
25 KB
Demos: - [Grid](https://material-ui.com/components/grid/) API: - [Grid API](https://material-ui.com/api/grid/)
2 contributors
Install grid as a package?
Copied
npm i @bit/mui-org.material-ui.grid
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
grid ()

Demos:

API:

Properties
NameTypeDescription
alignContent
'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'

Defines the align-content style property. It’s applied for all screen sizes.

alignItems
'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'

Defines the align-items style property. It’s applied for all screen sizes.

children
node

The content of the component.

classes
(required)
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
component
elementType

The component used for the root node. Either a string to use a DOM element or a component.

container
bool

If true, the component will have the flex container behavior. You should be wrapping items with a container.

direction
'row' | 'row-reverse' | 'column' | 'column-reverse'

Defines the flex-direction style property. It is applied for all screen sizes.

item
bool

If true, the component will have the flex item behavior. You should be wrapping items with a container.

justify
'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'

Defines the justify-content style property. It is applied for all screen sizes.

lg
false | 'auto' | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

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
false | 'auto' | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

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
false | 'auto' | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

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
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

Defines the space between the type item component. It can only be used on a type container component.

wrap
'nowrap' | 'wrap' | 'wrap-reverse'

Defines the flex-wrap style property. It’s applied for all screen sizes.

xl
false | 'auto' | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Defines the number of grids the component is going to use. It’s applied for the xl breakpoint and wider screens.

xs
false | 'auto' | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

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

If true, it sets min-width: 0 on the item. Refer to the limitations section of the documentation to better understand the use case.