Grid
Allows users to create a grid layout.
Function signature
app.grid(rows=None, gutter=(0, 0), vertical_alignment='top', columns=1)
Parameters
| Parameter | Description |
|---|---|
| rows (Optional[Union[int, Responsive]]) | The number of rows to use in the grid |
| gutter (Union[Gutter, Tuple[Gutter, Gutter]]) | The space between rows and columns. |
| vertical_alignment (GridVerticalAlignmentType) | Controls the vertical alignment of items on each grid row. |
| columns (Union[int, Responsive]) | The number of columns to use. |
Quick Tip
- For the gutter parameter, it is recommended to leave 16 pixels between rows and columns.
- If you wish to increase it, do it by multiples of 8.
Example
The basic example below shows how to create a grid layout.
from shapelets.apps import dataApp
# Set up the data app
app = dataApp()
# Column Settings
responsive_columns = {"xs": 1, "sm": 2, "md": 3, "lg": 4, "xl": 5}
# 8px between rows, 16px between columns
custom_gutter = (8, 16)
# Grid with custom gutter
with app.grid(columns=responsive_columns, gutter=custom_gutter) as grid:
for i in range(1, 11):
grid.text(f"Item {i}")
