> The layout grid component adapts to screen size (responsive), ensuring consistency across layouts. > The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Based on our design principles, this co
npm install @s-ui/react-layout-grid> The layout grid component adapts to screen size (responsive), ensuring consistency across layouts.
> The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Based on our design principles, this component is based on a 12 columns grid layout.
``sh`
$ npm install @s-ui/react-layout-grid
- This component uses CSS Flexbox for high flexibility (Support for CSS grid? Would be great 😉).
- There are two types of layout: and your items .xxs | xs | s | m | l | xl | xxl
- Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
- Items have padding to create the spacing between individual items.
- The breakpoints is defined on sui-theme:
#### Import package and use the component
`js
import LayoutGrid from '@s-ui/react-layout-grid'
return
`
Default
`js`
With breakpooints
`js`
...
...
With alignItems and justifyContent and alignContent props
`js`
justifyContent="space-around"
alignContent="stretch"
>
...
...
With cells offset
`js`
...
#### Import the styles (Sass)
`css``
@import '~@s-ui/theme/lib/index';
// @import 'your theme';
@import '~@s-ui/react-layout-grid/lib/index';
> Find full description and more examples in the demo page.