# GridLayout

> Cuadrícula de columnas por fracción, una altura de fila según el contenido más alto.

Source: https://crossfly.dev/es/docs/ui/layouts/grid-layout — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# GridLayout

Distribuye los hijos en una **cuadrícula**: cada fila tiene su propia división de **columnas por fracción**, y la
altura de la fila viene del componente más alto. Excelente para formularios "etiqueta : campo".

> 🟡 · **Paquete:** `dev.crossfly.ui.layout` · **Extiende:** `Layout`

## Cuándo usar
- Formularios alineados (etiqueta | campo) con proporción estable.
- Tablas simples de celdas.

## Cuándo NO usar
- Una sola columna → [VerticalLayout](/docs/ui/layouts/vertical-layout).
- Anclar un componente a otro → [RelativeLayout](/docs/ui/layouts/relative-layout).

## `add(...)` — firma y semántica (¡atención al orden!)
```java
public GridLayout add(Object... v)   // TODOS los anchos, luego TODOS los componentes
```
Pasa **primero todos los anchos**, luego **todos los componentes** (misma cantidad):

| Ancho | Significado |
|---|---|
| `> 0` (ex. `0.35f`) | **fracción** del ancho de la cuadrícula (35%) |
| `LAY_AUTO` (`0f`) | ancho **automático** (la celda usa el tamaño del contenido) |

## Constructores
| Constructor | Descripción |
|---|---|
| `new GridLayout()` | alineación `START`/`START` |
| `new GridLayout(Position h, Position v)` | alineación horizontal/vertical de las filas |

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      GridLayout form = new GridLayout(Position.START, Position.START);
      // rótulo (35%) | campo (65%) — anchos primero, componentes después:
      form.add(0.35f, 0.65f, new Label("Nome"),     new TextField(""));
      form.add(0.35f, 0.65f, new Label("E-mail"),   new TextField(""));
      form.add(0.35f, 0.65f, new Label("Telefone"), new TextField(""));

      Component painel = new Component();
      painel.setLayout(form);

      setLayout(new VerticalLayout(Position.START, Position.START));
      add(LAY_AUTO, new Label("Cadastro"));
      add(LAY_FILL, painel);
   }
}
```

> Los fragmentos siguientes muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutar, colócalos en el esqueleto `MainWindow` anterior.

## Uso básico
```java
GridLayout form = new GridLayout(Position.START, Position.START);
// rótulo (35%) | campo (65%) — anchos primero, componentes después:
form.add(0.35f, 0.65f, new Label("Nome"),     new TextField(""));
form.add(0.35f, 0.65f, new Label("E-mail"),   new TextField(""));
form.add(0.35f, 0.65f, new Label("Telefone"), new TextField(""));

Component painel = new Component();
painel.setLayout(form);
```

## Cómo distribuye
```
┌───────────┬──────────────────────┐
│ Nome (35%)│ [campo]        (65%)  │  ← linha 1
├───────────┼──────────────────────┤
│ E-mail    │ [campo]              │  ← linha 2
└───────────┴──────────────────────┘
```

## Buenas prácticas
- Las fracciones de una fila **suman ~1.0** para cubrir el ancho.
- Las filas pueden tener **números de columnas diferentes** (cada `add` define una fila).

## Errores comunes
- **Intercalar** ancho y componente: `add(0.35f, label, 0.65f, field)` → lanza `UIException`.
  Lo correcto es `add(0.35f, 0.65f, label, field)` (anchos juntos, luego componentes).
- Número de anchos ≠ número de componentes → `UIException` (`cols*2 == args`).

## Ver también
- [VerticalLayout](/docs/ui/layouts/vertical-layout) · [RelativeLayout](/docs/ui/layouts/relative-layout) · [Responsividad](/docs/ui/layouts/responsiveness)