Skip to main content

LayoutGrid

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.

Installation​

$ npm install @s-ui/react-layout-grid

Usage​

  • This component uses CSS Flexbox for high flexibility (Support for CSS grid? Would be great 😉).
  • There are two types of layout: <LayoutGrid /> and your items <LayoutGridItem />.
  • 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: xxs | xs | s | m | l | xl | xxl

Basic usage​

Import package and use the component​

import LayoutGrid from '@s-ui/react-layout-grid'

return <LayoutGrid />

Default

<LayoutGrid>
  <LayoutGridItem colSpan={4}>...</LayoutGridItem>
  <LayoutGridItem colSpan={8}>...</LayoutGridItem>
</LayoutGrid>

With breakpooints

<LayoutGrid>
  <LayoutGridItem xxs={1} s={4} m={2} xl={6}>
    ...
  </LayoutGridItem>
  <LayoutGridItem xxs={1} s={8} m={10} xl={6}>
    ...
  </LayoutGridItem>
</LayoutGrid>

With alignItems and justifyContent and alignContent props

<LayoutGrid
  alignItems="center"
  justifyContent="space-around"
  alignContent="stretch"
>
  <LayoutGridItem s={4} xl={6}>
    ...
  </LayoutGridItem>
  <LayoutGridItem s={8} xl={6}>
    ...
  </LayoutGridItem>
</LayoutGrid>

With cells offset

<LayoutGrid>
  <LayoutGridItem s={6} sOffset={3} xl={10} xlOffset={1}>
    ...
  </LayoutGridItem>
</LayoutGrid>

Import the styles (Sass)​

@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.