The responsive layout grid adapts to Olive Helps size and orientation, ensuring consistency across layouts.
Props:
Properties
Descriptions
Required
Default
alignContent
It sets the distribution of space between and around content items along a grid's block axis. Options: FlexStart | FlexEnd | Center | SpaceBetween | SpaceAround | Stretch
stretch
alignItems
It controls the alignment of items on the Block Axis within their grid area.
flex-start
children
The child components
undefined
direction
It controls how they are aligned. Options: Row | RowReverse | Column | ColumnReverse
row
justifyContent
It controls distribution between and around content items
flex-start
spacing
It controls space between children
0
wrap
Options: NoWrap | WrapReverse | Wrap
nowrap
xs
xs is one of grid breakpoints. Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
A value given to a breakpoint applies to all the other breakpoints wider than it is (unless overridden, as you can read later in this page). For example, xs={12} sizes a component to occupy the whole viewport width regardless of its size.
false
container
container is a layout. container and item are mutually exclusive
item
item is a layout. container and item are mutually exclusive
When container and item both exist or they both not exist:
If xs exists, the props would be : container: false, item: true.
If xs doesn't exist, the props would be: container: true, item: false.