# Bento box
The bento box is a way for the user to group charts together with a more fine tuned way of managing the sizes of the components. To group the charts the function `s.plt.set_bentobox` must be used, and to stop grouping the elements the user has to call the function `s.plt.pop_out_of_bentobox`. When defining the bento box the cols size and rows size can be defined which will will set the size of the bentobox in the main grid.
**Some behavior considerations:**
* The bento box has it's own grid, and this grid has a different distribution to the main grid:
* **24 columns** - NO gap
* **Row size 16 px height** - NO gap
* If components do not define the `rows_size` parameter, they will have:
* Indicators components will have, by default, eight rows.
* Other components will have, by default, 14 rows.
* If components do not define the `cols_size` parameter, they will have:Indicators comps will have, by default, 12 cols.
* Other components will have, by default, 24 cols.
Example:
```python
s.plt.set_bentobox(cols_size=8, rows_size=3)
indicator_data = {
"description": "",
"title": "State",
"value": "Open",
}
s.plt.indicator(
data=indicator_data, order=0,
rows_size=8, cols_size=12,
)
s.plt.indicator(
data=indicator_data, order=1,
rows_size=8, cols_size=12,
)
s.plt.bar(
data=[
{'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5},
{'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5},
{'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5},
{'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5},
{'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5},
],
x='date', order=2, rows_size=24, cols_size=24,
)
s.plt.pop_out_of_bentobox()
```
And create stuff such as:
