Sizing

You could set the element size using the size attribute.

size="flex"

Sets the element occupy all available space.

<layout>
    <column>Alpha</column>
    <column size="flex">Beta</column>
    <column>Charlie</column>
</layout>

It is also true for children of vertical layouts.

<layout mode="vertical" style="height: 200px;">
    <row>Alpha</row>
    <row size="flex">Beta</row>
    <row>Charlie</row>
</layout>

Notice that for the children to flex correctly on vertical layouts, the container needs to have a height.

size="1...12"

By default, all children elements share the same width. If you want some element to take up more space, you can set its occupation ratio relative to the other elements. For example, look what you need to do to set Beta to have twice the size of Alpha, and Charlie to have three times its space.

<layout>
    <row size="1">Alpha</row>
    <row size="2">Beta</row>
    <row size="3">Charlie</row>
</layout>

size="none"

Let the element occupy just the space needed for its content. It works great with Javascript to remove the flex behaviour of an element.

limited

You can also limit the max width of a layout. The limited attribute limits the size of an inner layout element and align it to the center (when necessary).

<layout limited>
    <layout>
        <row>Alpha</row>
        <row>Beta</row>
    </layout>
</layout>

To change the max-width, you just need to declare a new value to the $limit variable before importing upDRY.css on your Sass stylesheet. By default, 1200px is the max-width.