# Grid Layout

It is possible to create a custom grid layout using the `layout` parameter in the Grid object.  
The `layout` option accepts a 2D matrix — a list of lists — where:

* Each inner list represents a column in the grid.  
* Each item within the inner list represents a row in that column.  

To specify which cells are active, use `{}`, and for the cells that should remain empty use `None`.  

To configure cells, you have the following options:

* `{}` – An active cell (that can hold content).  
* `None` – Inactive/empty cell (will be skipped).  
* `{"colspan": N}` – An active cell that spans N columns.  
* `{"rowspan": N}` – An active cell that spans N rows.  

The following layout creates a grid with **2 columns and 3 rows**, where the middle row contains an active cell that spans 2 columns, and the last row has two active cells:

```bash
1. grid = rephorm.Grid(
2.     ncol=2, nrow=3, layout=[[None, None], [{"colspan": 2}, None], [{}, {}]])
3.  
4. grid.add(chart)
5.  
6. grid.add(chart)
7.  
8. grid.add(chart)
```
![marketplace](assets/cpi1.png)

The first chart added to the grid is automatically placed in the first active cell of the middle row. When using colspan, it is important to set the remaining spanned cells in that row to None.

The example below demonstrates a similar layout configuration, but using “rowspan” instead. Note that in the last row (the last list), None is used for the first cell to account for the vertical span:

```bash
1. grid = rephorm.Grid(
2.     ncol=2, nrow=3, layout=[[None, None], [{"rowspan": 2}, None], [None, {}]])
3.  
4. grid.add(chart)
5.  
6. grid.add(chart)
7.  
```
![marketplace](assets/cpi2.png)