Container

Example

import { Container } from 'matterial'

function ContainerExample() {
  return (
    <Container>
      <Container row nowrap>
        <div>Foo</div>
        <div>Bar</div>
      </Container>
      <Container row nowrap>
        <div>Lorem</div>
        <div>Ipsum</div>
      </Container>
    </Container>
  )
}

Rows

row = boolean

With the row prop, contents will wrap normally.

Wrapping

nowrap = boolean

To prevent wrapping, set nowrap.

<Container row>
  {Array.from('ABCDEFGH').map(letter => (
    <div key={letter}>{letter}</div>
  ))}
</Container>
<Container row nowrap>
  {Array.from('ABCDEFGH').map(letter => (
    <div key={letter}>{letter}</div>
  ))}
</Container>

Alignments

center = boolean

Use center to align contents to the container, and style.alignSelf to align individual items.

<Container row center>
  <div style={{ height: 100 }}>A</div>
  <div>B</div>
  <div style={{ alignSelf: 'flex-start' }}>C</div>
</Container>

Dividers

Use the <Divider> component to add a divider between container children.

<Container>
  <Container row nowrap>
    <div>Foo</div>
    <Divider />
    <div>Bar</div>
  </Container>
  <Divider color="mt-red" size={5} />
  <Container row nowrap>
    <div>Lorem</div>
    <Divider />
    <div>Ipsum</div>
  </Container>
</Container>

Gaps

gap = number|string

Use gap to add space between container children. A number indicates pixels, and a string indicates a CSS value, eg 1rem.