reflex/docs/library/layout/grid.md
2024-02-26 17:18:28 +01:00

41 lines
608 B
Markdown

---
components:
- rx.radix.grid
---
```python exec
import reflex as rx
```
# Grid
Component for creating grid layouts. Either `rows` or `columns` may be specified.
## Basic Example
```python demo
rx.grid(
rx.foreach(
rx.Var.range(12),
lambda i: rx.card(f"Card {i + 1}", height="10vh"),
),
columns="3",
spacing="4",
width="100%",
)
```
```python demo
rx.grid(
rx.foreach(
rx.Var.range(12),
lambda i: rx.card(f"Card {i + 1}", height="10vh"),
),
rows="3",
flow="column",
justify="between",
spacing="4",
width="100%",
)
```