> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Controla las dimensiones y el tamaño de los elementos

> Ajusta las dimensiones de los elementos para controlar el ancho, el alto y la adaptación y conseguir diseños limpios y flexibles.

La sección Dimensions te permite controlar el **tamaño de cualquier elemento del lienzo**. Así gestionas el diseño, el espaciado y la adaptación a cada pantalla.

Encontrarás estos ajustes en el **panel derecho** al seleccionar cualquier elemento.

***

## Dónde encontrarlo

1. Haz clic en cualquier elemento del lienzo
2. Ve al **panel derecho**
3. Abre la sección **Dimensions**

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/sizes.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=705a6a256803b04df8c147505c50015e" alt="Sizes" width="1306" height="988" data-path="images/sizes.png" />
</Frame>

***

## Controles de tamaño

### Width

Controla el ancho del elemento.

### Height

Controla el alto del elemento.

***

## Las unidades, explicadas

Al definir el ancho o el alto, puedes elegir entre distintas unidades:

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-7.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=f31fcf19b3ae1fd9797b6520f523bfd1" alt="Image" width="292" height="319" data-path="images/image-7.png" />
</Frame>

### px (píxeles)

* Tamaño fijo
* No cambia según la pantalla
* Ideal para un control preciso

### % (porcentaje)

* Relativo al contenedor padre
* Adaptable y flexible
* Ideal para diseños que se ajustan al tamaño de la pantalla

### Fit

* Se ajusta automáticamente al contenido
* El elemento crece o se reduce según lo que tenga dentro

***

## Opciones avanzadas

Haz clic en **More Options** para acceder a:

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-8.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=979d94a0d85cf73a9ce230c967d4403e" alt="Image" width="285" height="364" data-path="images/image-8.png" />
</Frame>

### Min Width / Min Height

* Define el tamaño mínimo que puede tener el elemento

### Max Width / Max Height

* Define el tamaño máximo hasta el que puede crecer el elemento

***

## Ejemplo

* Width → `100%`
* Max Width → `600px`

👉 El elemento se estirará en pantallas pequeñas, pero no superará los 600px en pantallas grandes.

***

## Buenas prácticas

* Usa **%** para diseños adaptables
* Usa **px** cuando necesites un control exacto
* Usa **Fit** cuando el tamaño del contenido deba definir el del elemento
* Define un **ancho máximo** para que el diseño se vea limpio en pantallas grandes
