Grid

Utilize este componente para alinhar vários componentes em uma mesma linha. Ele divide o espaço exatamente pelo número de componentes dentro dele.

Exemplo

Modifique esse componente em tempo real pelo Storybook clique aqui

Utilização

<Grid>
    <Paragraph>Preço</Paragraph>
    <Paragraph>R$50,00</Paragraph>
</Grid>

Propriedades

Columns

• Type: Number
• Opcional

Indica quantas colunas o grid terá. Máximo de 5.

Exemplo:

<Grid columns={2}>
    {[
    <Circle
        key={1}
        icon={require('../assets/images/icon_ame.svg')}
    />,
    <Circle
        key={2}
        icon={require('../assets/images/icon_ame.svg')}
    />,
    <Circle
        key={3}
        icon={require('../assets/images/icon_ame.svg')}
    />,
    <Circle
        key={4}
        icon={require('../assets/images/icon_ame.svg')}
    />,
    ]}

Outros exemplos

Usando dois componentes

Utilizando quatro componentes