Size in Creght

Quick Start:

• Use Fixed for precise control over width/height.
• Use Percentage or Fill (fr) for responsive layouts.
• Use Auto for content-driven sizing (like text).
• Use Viewport for full/partial screen sections.
• Enable Aspect Ratio to maintain element proportions during resizing.

Select an element, then go to the Size panel in the right-hand settings sidebar to adjust its dimensions.

Width can be set as: Fixed, Percentage, Fill, or Auto.
Height has the same options, with an additional type: Viewport.

Size Types

Fixed

A fixed size assigns an exact value to the element.
For example, setting the width to 120px means the element will always remain 120px wide across all devices.

Percentage

Percentage size is based on the parent container’s size.
For example, setting the width to 50% makes the element half the width of its parent.

Fill (1fr)

When the parent uses Auto Layout, setting a child element’s width to Fill (1fr) makes it take up the remaining available space.

In the example below, the right element is fixed at 360px. The left blue block is set to 1fr, filling the rest of the parent container.

![image.png]

If multiple elements are set to Fill (1fr), the remaining space is divided equally.
If one element is set to 2fr, it will take up twice as much space as the others.

Auto

Auto size makes the element wrap its content.
For example, a text element will automatically adjust its width or height based on the text length.

Viewport

Viewport size is based on the visible area of the browser window.

• 100vh = full viewport height
• 50vh = half viewport height

Aspect Ratio

Enabling the lock icon between width and height activates a fixed aspect ratio.
When enabled, the element’s proportions remain constant during resizing (e.g., when the browser width changes).

This is commonly used to display images without distortion.

⚠️ Note: Creght only supports height scaling according to width changes.

Size Type Comparison