# 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

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHv3MrvCKbpgo1EeVya%2F-MHv5eN4O8ftILPDiH1Y%2FScreenshot%202020-09-23%20at%206.11.36%20PM.png?alt=media\&token=cd67d224-5132-480b-a249-e69e48bb06f3)

#### 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**

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHv70rPpuwdbggKGuGs%2F-MHv7CMqf6FKS_sBwZTH%2FScreenshot%202020-09-23%20at%206.21.43%20PM.png?alt=media\&token=45a3241b-c670-46d0-b031-c279d6252757)

**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

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHv3MrvCKbpgo1EeVya%2F-MHv5mqRVv1eTamg86EJ%2FScreenshot%202020-09-23%20at%206.12.03%20PM.png?alt=media\&token=a75a2f28-1935-4326-b53c-1c1cdbe438b8)

### 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      |