# 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](/dev/building-web-app/grid.md).

![It may be necessary to scroll down the screen to see all the components. ](/files/IqXHU7quBbCQcNfZcHsC)

For more information refer to [Grid](/dev/building-web-app/grid.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.