> For the complete documentation index, see [llms.txt](https://docs.shimoku.com/dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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