grid

v3.9.2arrow_drop_down
v3.9.2
STATUS
Passing
DOWNLOADS
625
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 months ago
1 contributor
Like
Use grid in your project ?
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
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';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
alignContent
'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
'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.

className
string
component
custom'div'

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

container
boolfalse

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''row'

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

item
boolfalse

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''flex-start'

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 | 12false

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 | 12false

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 | 12false

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 | 8 | 16 | 24 | 32 | 400

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

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

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 | 12false

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 | 12false

Defines the number of grids the component is going to use. It’s applied for all the screen sizes with the lowest priority.

zeroMinWidth
boolfalse

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