# Using the Grid

All the charts shown use a position in the grid. This is an example:

```python
data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 10},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 8},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 10},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 2},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 14},
]

s.plt.bar(
    data=data, x='date', order=0,
    rows_size=2, cols_size=5
)

data_ = [
    {'name': 'Matcha Latte', 'value': 78},
    {'name': 'Milk Tea', 'value': 17},
    {'name': 'Cheese Cocoa', 'value': 18},
    {'name': 'Walnut Brownie', 'value': 9},
    {'name': 'Buckeye Brownie', 'value': 12},
]

s.plt.pie(
    data=data_,
    names='name', values='value', order=1,
    rows_size=2, cols_size=4,
    padding="0,0,0,1",
)

data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 3},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 7},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 6},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
]

s.plt.line(
    data=data,
    x='date', order=2,
    rows_size=2, cols_size=12,
    padding='1,0,0,0',
)
```

The first component is a bar, it has `order=0`, and `cols_size=5.`

The second component is a pie, with `order=1`,  and `cols_size=4`. They are in the same row because the total number of column spaces in a row is 12.

The third component is a line chart, `order=2`, and `cols_size=12`. It spans all the row, there is a space before the component because a `padding='1,0,0,0'` introduces this space. The space is introduced in this order: `Padding:` \[ `top, right, bottom, left` ], for more details see [Grid](https://docs.shimoku.com/dev/building-web-app/grid).

![It may be necessary to scroll down the screen to see all the components. ](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FqKFox7pNwrmylytNKVNP%2FGrid%20test\(1\).png?alt=media\&token=89669e2d-9135-4bca-8377-f703cb8d49ef)

For more information refer to [Grid](https://docs.shimoku.com/dev/building-web-app/grid).