El auto-layout posiciona los hijos automáticamente dentro de un marco. Soporta dos modos: **flex** (flujo horizontal/vertical) y **grid** (filas y columnas con dimensionamiento de tracks).
El layout grid organiza los hijos en filas y columnas con dimensionamiento explícito de tracks.
### Activar Grid
Selecciona un marco con auto-layout activado y haz clic en el icono de cuadrícula en la barra de herramientas de layout para cambiar de flex a grid.
### Dimensionamiento de tracks
Define tracks de columnas y filas con tres modos:
- **fr** — unidad fraccional, divide el espacio disponible proporcionalmente
- **px** — tamaño fijo en píxeles
- **auto** — se ajusta al contenido
### Espaciado del grid
Establece gaps horizontales (columnas) y verticales (filas) separados entre celdas.
### Posicionamiento de hijos
Los hijos se colocan en las celdas del grid automáticamente en orden de fila. Puedes sobrescribir la ubicación con valores de inicio de columna/fila y span en las propiedades de layout del hijo.
### Exportación JSX y Tailwind
Los layouts grid se exportan como JSX con clases Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`.
