> For the complete documentation index, see [llms.txt](https://developer.supervisely.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.supervisely.com/app-development/widgets/layouts-and-containers/grid.md).
# Grid
## Introduction
**`Grid`** widget in Supervisely is a widget that enables users to arrange other widgets in a flexible and responsive grid layout. Users can customize the layout by setting the gap between widgets and number of columns. With the `Grid` widget, users can easily create dynamic and adaptable layouts that can be optimized for different devices and screen sizes
## Function signature
```python
Grid(
widgets=[Input(), Input(), Input(), Input()],
columns=2,
gap=10,
widget_id=None,
)
```
## Parameters
| Parameters | Type | Description |
| :---------: | :------------: | :----------------------------------: |
| `widgets` | `List[Widget]` | List if widgets to display on `Grid` |
| `columns` | `int` | Number of columns on `Grid` |
| `gap` | `int` | Gap between widgets on `Grid` |
| `widget_id` | `str` | ID of the widget |
### widgets
Determine list of `Widgets` to display on `Grid`.
**type:** `List[Widget]`
```python
Grid(
widgets=[Input()],
)
```
### columns
Number of columns on `Grid`.
**type:** `int`
**default value:** `1`
```python
grid = Grid(
widgets=[Input(), Input(), Input(), Input()],
columns=2,
)
```
### gap
Determine gap between `Widgets` on `Grid`.
**type:** `int`
**default value:** `10`
```python
grid = Grid(
widgets=[Input(), Input(), Input(), Input()],
gap=50,
)
```
```python
grid = Grid(
widgets=[Input(), Input(), Input(), Input()],
columns=3,
gap=50,
)
```
### widget\_id
ID of the widget.
**type:** `str`
**default value:** `None`
## Mini App Example
You can find this example in our Github repository:
[ui-widgets-demos/layouts and containers/006\_grid/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/layouts%20and%20containers/006_grid/src/main.py)
### Import libraries
```python
import os
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Grid, ObjectClassView
```
### Init API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
```python
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()
```
### Initialize widgets we will use in UI
```python
obj_class_cat = sly.ObjClass(name="cat", geometry_type=sly.Bitmap, color=[255, 0, 0])
obj_class_dog = sly.ObjClass(name="dog", geometry_type=sly.Bitmap, color=[0, 255, 0])
obj_class_sheep = sly.ObjClass(name="sheep", geometry_type=sly.Bitmap, color=[0, 0, 255])
obj_class_horse = sly.ObjClass(name="horse", geometry_type=sly.Bitmap, color=[255, 255, 0])
obj_class_squirrel = sly.ObjClass(name="squirrel", geometry_type=sly.Bitmap, color=[255, 0, 255])
obj_classes = [
obj_class_cat,
obj_class_dog,
obj_class_sheep,
obj_class_horse,
obj_class_squirrel,
]
obj_class_view_widgets = [ObjectClassView(obj_class=obj_class) for obj_class in obj_classes]
```
### Initialize `Grid` widget
```python
grid = Grid(
widgets=obj_class_view_widgets,
columns=3,
gap=50,
)
```
### Create app layout
Prepare a layout for app using `Card` widget with the `content` parameter and place widget that we've just created in the `Container` widget.
```python
card = Card(
title="Grid",
content=grid,
)
layout = Container(widgets=[card])
```
### Create app using layout
Create an app object with layout parameter.
```python
app = sly.Application(layout=layout)
```
