# Cuadrícula

> Columnas iguales, o pistas como en CSS con expansión. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/grid/

:::tip[En pocas palabras]
Ordena las cosas en filas y columnas, como azulejos en una pared.
:::

Coloca los hijos en una cuadrícula. Con `columns=3` las columnas son iguales, y `max_width` mete tantas como quepan. Con listas de pistas (`columns=[200, "1fr", "auto"]`) funciona como un grid de CSS, y `pz.cell(child, column=, row=, column_span=, row_span=)` coloca un hijo a mano.

`pz.grid` · Categoría: [Disposición](https://albakore.github.io/pyzed/es/library/#disposición) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#grid)

**Código:**

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([box(str(i), w="fill") for i in range(1, 9)], columns=4, spacing=8), width=440)
```

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

- Para galerías, dashboards y maquetas de página con cabecera, barra lateral y contenido.

## Uso

```python
import pyzed as pz
from pyzed import ui

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([box(str(i), w="fill") for i in range(1, 9)], columns=4, spacing=8), width=440)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Columnas

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([box(str(i), w="fill") for i in range(1, 5)], columns=2, spacing=8, height=44), width=220)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([box(str(i), w="fill") for i in range(1, 7)], columns=3, spacing=8, height=44), width=300)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([box(str(i), w="fill") for i in range(1, 9)], columns=4, spacing=8, height=44), width=380)
```

### Pistas

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([box("100 px", w="fill"), box("1fr", w="fill")], columns=[100, "1fr"], spacing=8),
             width=340, height=44)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([pz.cell(box("header", w="fill"), column=0, row=0, column_span=2),
                      pz.cell(box("a", w="fill"), column=0, row=1),
                      pz.cell(box("b", w="fill"), column=1, row=1)], columns=["1fr", "1fr"], spacing=8),
             width=300, height=96)
```

## Ejemplos

### Pistas y expansión

Los números son píxeles, `"1fr"` reparte el espacio libre y `"auto"` se ajusta al contenido.

**Código:**

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.grid([
    pz.cell(box("header", w="fill"), column=0, row=0, column_span=2),
    pz.cell(box("sidebar", w="fill", h="fill"), column=0, row=1),
    pz.cell(box("content", w="fill", h="fill"), column=1, row=1),
], columns=[120, "1fr"], rows=[44, 110], spacing=8), width=440)
```

## Eventos

Cuadrícula no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Propiedades y API

### `pz.grid`

```python
grid(
    children=None,
    *,
    columns=None,
    rows=None,
    max_width=None,
    spacing=0.0,
    row_spacing=None,
    height=None,
    aspect_ratio=None,
    width=None,
    padding=None,
    align_x=None,
    align_y=None,
)
```

Coloca los hijos en una rejilla. Con `columns=3` las columnas son iguales (o `max_width` mete tantas como quepan). Con listas de pistas (`columns=[200, "1fr", "auto"]`, `rows=...`) funciona como un grid de CSS: los números son píxeles, `"auto"` se ajusta al contenido y `"<n>fr"` reparte el espacio que sobra. Envuelve los hijos en `pz.cell` para colocarlos y hacer que ocupen varias celdas; el resto llena las celdas libres fila a fila. Ver [Layout](https://albakore.github.io/pyzed/es/guides/layout/#rejillas).

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `children` | `None` | Lista de hijos. Se aplanan listas anidadas y se ignoran `None` y `False`, así que puedes escribir `cond and widget`. |
| `columns` | `None` | Número de columnas iguales, o pistas: una lista (`[200, "1fr", "auto"]`) o un texto (`"200 1fr auto"`). |
| `rows` | `None` | Pistas de las filas, como `columns`. Las filas que no están en la lista son `"auto"`. |
| `max_width` | `None` | Mete tantas columnas de como mucho este ancho como quepan (solo con `columns=<int>`). |
| `spacing` | `0.0` | Espacio entre celdas. |
| `row_spacing` | `None` | Espacio entre filas, si es distinto. |
| `height` | `None` | Con `columns=<int>`: alto de cada fila. Con pistas: alto de la rejilla. |
| `aspect_ratio` | `None` | Mantiene las celdas en esta proporción ancho/alto (solo con `columns=<int>`). |
| `width` | `None` | Con `columns=<int>`: píxeles. Con pistas: ancho de la rejilla (por defecto `"fill"`). |
| `padding` | `None` | Espacio alrededor de las celdas. |
| `align_x` | `None` | Alineación horizontal de cada elemento en su celda: `"start"`, `"center"`, `"end"`. |
| `align_y` | `None` | Alineación vertical de cada elemento en su celda. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#grid)

### `pz.cell`

```python
cell(
    content,
    *,
    column=None,
    row=None,
    column_span=1,
    row_span=1,
    align_x=None,
    align_y=None,
)
```

Coloca un hijo en una rejilla con pistas: su columna y fila (desde 0) y cuántas ocupa. Los hijos sin celda llenan las celdas libres fila a fila. Fuera de una rejilla es solo el hijo.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `content` | *obligatorio* | El widget. |
| `column` | `None` | Índice de columna (desde 0). |
| `row` | `None` | Índice de fila (desde 0). |
| `column_span` | `1` | Columnas que ocupa. |
| `row_span` | `1` | Filas que ocupa. |
| `align_x` | `None` | Alineación horizontal en la celda. |
| `align_y` | `None` | Alineación vertical en la celda. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#cell)

## Relacionados

- [Flex](https://albakore.github.io/pyzed/es/library/flex/): Flexbox de CSS: justify, align, gap, wrap y grow.
- [Fila](https://albakore.github.io/pyzed/es/library/row/): Coloca los hijos en horizontal.
- [Columna](https://albakore.github.io/pyzed/es/library/column/): Apila los hijos en vertical.