# Stretch units

Some size or spacing values in Subform might look a little unfamiliar. Learn what these values mean---and how to use them to create responsive designs.

## Basics

In digital design, sizes are typically specified in pixels, like a box that has a width of `100px`

. Using pixels is pretty straightforward when you know the exact size you want. Responsive designs, though, have elements that need to grow or shrink based on the size of the screen or browser window.

In Subform, you can specify sizes that respond to the size of their parent by using the *stretch unit*, `s`

. While `100`

is an *absolute* value, `1s`

is a *relative* one. Its exact size can vary, depending on its relationships with other elements.

Imagine you have two boxes, both set to a width of `1s`

. Instead of being fixed, the boxes now *stretch* in width to take up all the available space, even as the artboard resizes:

In this case, both boxes are dividing up the available space evenly. What if you wanted the first box to be three times as wide as the second one? Change its width to `3s`

:

The first box will now always be three times wider than the second box, but they both still stretch out to make sure all of the available space is used up.

Stretch values are based on some simple math. If you add up both of the stretch values in this example, you'd have `3s + 1s = 4s`

. This means that the available space is divided up into *4 total segments*.

The first box's width is `3s`

, so that accounts for 3/4, or 75%, of the available space. The second box is `1s`

, so that's 1/4, or 25%, of the available space.

If you add another box to this example, the math changes slightly:

Add up all the stretch values now and you'll have `3s + 1s + 1s = 5s`

, or *5 total segments*. The first box's width is `3s`

, so that's 3/5, or 60%. The other boxes are `1s`

, so that's 1/5, or 20% each.

What happens if you only have one box? In that case, it doesn't matter if the width is set to `1s`

or `22s`

, because it's the only element dividing up the space. 1/1 or 22/22 always equals 100%.

## Stretch vs. percentage

It can seem easier to just use percentage values when you're creating responsive designs. For example, if you wanted one box to be three times as wide as the other, you could just set the widths to `75%`

and `25%`

:

That's pretty simple, but what happens if you decide to add some more boxes to the stack?

Since the first two boxes add up to all of the available space (`75% + 25% = 100%`

), there isn't any more room to add in three more boxes. The new boxes *overflow* the container and aren't visible. You can still see their selection outlines when selected via the tree.

To fix this, you'll have to change the percentage values of your original two boxes to account for the three new ones. Rather than manually do this calculation every time you make a change, you can use stretch values instead. Here's what it looks like when you add three boxes to the original example, using stretch values:

3 + 1 + 1 + 1 + 1 = 7. The first box is 3/7 or 42.85%. The others are 1/7 or 14.28%. Add or remove boxes and Subform will automatically recalculate the widths for you. Much better than doing the math yourself, right?

## Minimum & maximum sizes

Stretchable elements often need to have bounds: a minimum and/or maximum size that the element shouldn't be able exceed.

In Subform, you'll sometimes see default values like `1s_20`

. The first part, `1s`

, tells the element to stretch. The second part, `_20`

, represents the *minimum size*. No matter how little space is available for the element, it will never shrink to less than `20`

:

*Maximum* sizes work the same way, but instead of using an underscore, they are indicated with a caret:, like `1s^400`

.

Minimum and maximum values can be specified together. A width of `1s_20^200`

means that the element should stretch, but never be smaller than 20 or larger than 200.

## Mixing stretch & other units

Elements that stretch can be used in conjunction with fixed size elements.

The leftmost box is set to a fixed width of `200`

. The right two boxes, both set to `1s`

, are dividing up the remaining available space: *what's left after the 200 is accounted for*.

Similarly, stretch elements can also work in conjunction with elements set to percentage sizes:

Here, the leftmost box is set to a percentage with of `50%`

, it will always take up 50% of its parent element. The right two boxes, both set to `1s`

, divide up the remaining 50%.

Note: Percentages are always based on the size of the parent element. If the parent is 100, a value of

`100%`

will always equal 100,`50%`

will always equal 50, and so on. Unlike stretch values, percentage values don't take into account the size or spacing of sibling elements.