> For the complete documentation index, see [llms.txt](https://theoremui.gitbook.io/react-store-ui-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://theoremui.gitbook.io/react-store-ui-template/ui/container.md).

# Grid

React Native Store UI template provides you a clean list of components which helps you to generate grid with minimal efforts. See below samples

**Sample 2 Columns**

```jsx
<Container>
    <Row>
        <Column>
            <P>Column 1 (50%)</P>
        </Column>
        <Column>
            <P>Column 2 (50%)</P>
        </Column>
    </Row>
</Container>
```

#### Output

![](/files/-MHv5eN4O8ftILPDiH1Y)

#### Sample 3 Columns with align props

```jsx
<Container>
    <Row>
        <Column flex={.33}>
            <SupSm>Column 1 (33%)</SupSm>
        </Column>
        <Column flex={.33}>
            <SupSm>Column 2 (33%)</SupSm>
        </Column>
        <Column flex={.34} alig={'flex-end'}>
            <SupSm>Column 3 (33%)</SupSm>
        </Column>
    </Row>
</Container>
```

**Output**

![](/files/-MHv7CMqf6FKS_sBwZTH)

**Sample 2 Columns with different width**

```jsx
<Container>
    <Row>
        <Column flex={.7}>
            <P>Column 1 (70%)</P>
        </Column>
        <Column flex={.3}>
            <SupSm>Column 2 (30%)</SupSm>
        </Column>
    </Row>
</Container>
```

#### Output

![](/files/-MHv5mqRVv1eTamg86EJ)

### Container

| Props                   | Required | Default |
| ----------------------- | -------- | ------- |
| style                   | No       |         |
| style.paddingHorizontal | No       | 15      |
|                         |          |         |

### Row

| Props                  | Required | Default |
| ---------------------- | -------- | ------- |
| style                  | No       |         |
| style.marginHorizontal | No       | -10     |
| nomargin               | No       | false   |

### Column

| Props                   | Required | Default    |
| ----------------------- | -------- | ---------- |
| flex                    | No       | 0.5        |
| align                   | No       | flex-start |
| style                   | No       |            |
| style.paddingHorizontal | No       | 10         |
| nopadding               | No       | false      |