# Size in Creght | Creght Visual Documentation

> Quick Start: Use Fixed for precise control over width/height. Use Percentage or Fill (fr) for responsive layouts.…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/help)

[Changelog](/blogs)

[AI](/docs/ai/quick-create-first-website) [Visual](/docs/get-start)

Basic

- [Get to Know Creght in 2 Minutes](/docs/get-start)
- [How to Register for Creght](/docs/signup)
- [Creating a Project in Creght](/docs/create-site)
- [Templates](/docs/tpls)

Design

- [Using the Editor](/docs/editor)
- [Basic Operations](/docs/operating)
- [Layouts in Creght](/docs/layout)
- [Position in Creght](/docs/position)
- [Size in Creght](/docs/size)
- [Breakpoints in Creght](/docs/breakpoint)
- [Overlays](/docs/popover)
- [Components in Creght](/docs/components)
- [Adding Third-Party Fonts](/docs/tp-font)
- [Duplicate and Deep Copy](/docs/deep-copy)

CMS

- [CMS (Content Management System)](/docs/cms)
- [Importing WeChat Official Account Articles into CMS](/docs/wxmp)

Site Setting

- [Page Settings](/docs/page-setting)
- [How to Upgrade a Plan](/docs/manage-plan)
- [SEO Settings](/docs/seo-setting)
- [Small Files (Site Verification)](/docs/verification-file)
- [Adding a Custom Domain in Creght](/docs/custom-domain)
- [How to Complete ICP Filing](/docs/beian)
- [Server Nodes](/docs/website-node)
- [How to Switch Sites](/docs/pxrp79jqtnyq)
- [Localization](/docs/localization)

AI

- [About Creght AI](/docs/creght-ai)

Tool

- [Convert Figma Designs into Live Websites](/docs/figma-to-creght)
- [3 Guidelines for Responsive Figma Layouts](/docs/figma-autolayout)
- [Covert Figma to live website](/docs/response-site)
- [Figma to Responsive Website: Interactions](/docs/figma03)
- [Compressing Video with FFmpeg](/docs/ffmpeg)
- [How to Add Clarity to Your Website](/docs/clarity)
- [Creating a Button Hover Effect](/docs/button)
- [How to Build a Reusable Collapsible FAQ Panel](/docs/collapse)
- [Responsive Navigation Tutorial](/docs/nav)

Design/

# 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.

![image.png](https://fsb.huglight.cn/87837258ec653927a8b62181f29e9828/image.png)

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.

![image.png](https://fsb.huglight.cn/bf14da4b0bd4c7bb2f632abe0f017715/image.png)

### 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.

![image.png](https://fsb.huglight.cn/faacb0b65ecbd1abfaddad3356d6a5d2/image.png)

### 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.![image.png](https://fsb.huglight.cn/47602a3ea85ff2440959e03220287ea0/image.png)

If one element is set to **2fr**, it will take up twice as much space as the others.

![image.png](https://fsb.huglight.cn/079dce59bba46d031a6444908c0be240/image.png)

### 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.

![image.png](https://fsb.huglight.cn/7ef0724fe4ac1e9a68b04c8d1a641a14/image.png)

### Viewport

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

- `100vh` = full viewport height
- `50vh` = half viewport height

![image.png](https://fsb.huglight.cn/50a44580ab11a78e752438060fb0fb6b/image.png)

### 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.

![image.png](https://fsb.huglight.cn/088f846950f04f52d24fe82f089ce0bd/image.png)

## Size Type Comparison

| Type | Definition | Common Use Case |
| --- | --- | --- |
| **Fixed** | Assigns an exact pixel value. The element size stays the same on all devices. | Buttons, icons, or elements requiring a precise size. |
| **Percentage** | Sets size as a percentage of the parent container. | Responsive layouts, making elements scale with their container. |
| **Fill (fr)** | Distributes remaining space within an auto layout. Multiple elements can share space proportionally (e.g., `1fr`, `2fr`). | Flexible grid layouts, equal or proportional columns. |
| **Auto** | Wraps the element around its content. | Text blocks or components that should adapt to content length. |
| **Viewport** | Uses the browser’s visible area ( `vh` for height). | Full-screen sections, hero banners, or elements that scale with the viewport. |
| **Aspect Ratio** | Maintains proportional width and height when resizing. | Images or videos that must keep their original proportions. |

On this page

- [Size Types](#size-types)
- [Fixed](#fixed)
- [Percentage](#percentage)
- [Fill (1fr)](#fill-1fr)
- [Auto](#auto)
- [Viewport](#viewport)
- [Aspect Ratio](#aspect-ratio)
- [Size Type Comparison](#size-type-comparison)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/)

[Discord](https://discord.gg/Qvq2nmZNnb)

## Links

- [Pricing](/price)
- [Solutions](/solution)
- [Customers](/customers)
- [Help Center](/help)
- [Contact Us](/contact)
- [Blog](/blogs)
- [Refund Policy](/tuikuan)

## Resources

- [All Resources](/resources)
- [Templates](/templates)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/effects)
- [Figma to Creght](/figma2creght)
- [API for AI](/api)

## Terms

- [Terms of Service](/legal/terms)
- [Privacy Policy](/legal/privacy)
- [Acceptable Use Policy](/legal/acceptable-use)

## Social Media

- [Twitter](https://twitter.com)
- [Facebook](https://www.facebook.com)
- [LinkedIn](https://www.linkedin.com)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)