# Hug, Fill and min/max sizes

> Choose how a layer's width and height are set: a fixed size, hugging its content or filling its parent, with limits.

Source: https://uxdeck.app/guide/sizing (checked against uxdeck on 16 October 2026)

Every layer's width and height has a mode. It can keep the size you typed, fit what is inside it, or take the space its parent leaves. Mixing these is how a button grows with its label, a card fills a column, and a text block never gets wider than is comfortable to read.

## Choose a mode

Select a layer and open the menu at the end of the **W** or **H** field in the **Layout** section:

- **Fixed:** the layer stays the size you set. The field shows just the number.
- **Hug contents:** the layer fits what is inside it. The field reads **Hug**.
- **Fill container:** the layer takes the space left in its parent. The field reads **Fill**.

Width and height are set separately, so a card can fill its column's width and hug its height.

## Which layers can do what

- **Hug** is offered for text, buttons and auto layout frames: layers whose size can come from their content.
- **Fill** needs a parent. On a layer at the top of the page, it shows in the menu as unavailable.
- Inside an auto layout frame, Fill shares the space left in the row or column with any other layers that fill.
- In a frame without auto layout, Fill pins the layer to both sides of its parent. It is the same as the **Left and right** (or **Top and bottom**) constraint; see [Constraints](/guide/constraints).
- A plain frame with nothing in it, or a shape outside auto layout, has a plain W and H with no menu.

Typing a number in W or H makes that side **Fixed**.

## Resize to fill or fit in one go

The **…** button at the end of the align row (**Distribute and resize**) has two shortcuts for one layer:

- **Resize to fill** sets both width and height to Fill.
- **Resize to fit** sets both to Hug.

## Min and max sizes

A layer that fills or hugs can be given limits, so it never gets too narrow or too wide.

1. Select an auto layout frame, or a layer inside one.
2. Open the **W** or **H** menu and choose **Add min width…** or **Add max width…** (or the height versions).
3. A **Min W** or **Max W** field appears under the size fields. It starts at the layer's current size: type the limit you want.

To remove one, press the minus beside it, or choose **Remove min width** in the same menu.

If you type a minimum above the maximum, the maximum moves up to match, and a message tells you so. The same goes the other way.

Min and max fields accept number variables: type <kbd>=</kbd> in the field to pick one. See [Variables and modes](/guide/variables).

## Several layers at once

Select several layers and the sizing menu shows the modes all of them allow. Where they differ, the field reads **Mixed**. A width typed into several layers sets each of them, each kept where it is.

## Lock the aspect ratio

Press **Lock aspect ratio** next to W and H, and changing one changes the other in proportion. Both sides become Fixed. Text has no lock: its height comes from its words.

## What it becomes on your site

When you publish or export, Hug is written as fit-content, Fill as a flexible size that shares the space, and min and max as min-width, max-width and so on. In [Settings](/guide/settings), set **Names in the panels** to **Developer** to see the CSS words in the panel.

## Catches

- **Min and max are for one layer at a time,** and only on an auto layout frame or a layer inside one.
- **Fill on a layer that ignores auto layout becomes Fixed.** It is out of the flow, so there is no space to share.
- **A wrapping row keeps each filling layer's width as its starting size,** so cards wrap to the next line on a narrow screen instead of squeezing. See Wrap in [Auto layout](/guide/auto-layout).
- **A locked ratio sets both sides to Fixed,** even if one of them was hugging or filling.

Hug, Fill and min/max sizes are on every plan.