Layout Grid

Grid of default wide (4 columns) items

Responsive UI is based on a column-variate grid layout. It has 4 columns on phone, 8 columns on tablet and 12 columns on desktop.

This columns variable grid is more powerful than the regular 12 columns layout grid.

Col span 4

Col span default + tablet 8


<Container className='demo-container'>
  <Row className='demo-row'>
    <Cell className='demo-cell'>
      Col span 4
    </Cell>
    <Cell className='demo-cell'>
      Col span 4
    </Cell>
    <Cell className='demo-cell' tablet={8}>
      Col span default + tablet 8
    </Cell>
  </Row>
</Container>

Grid max width 1024px align left

Col span default

Col span default + tablet 8


<Container maxWidth={'1024px'} align={'left'}>
  …
</Container>

Grid max width 1024px align center (default)

Col span default

Col span default + tablet 8


<Container maxWidth={'1024px'}>
  …
</Container>

Grid max width 1024px align right

Col span default

Col span default + tablet 8


<Container maxWidth={'1024px'} align={'right'}>
  …
</Container>