Tamanho

Você pode definir o tamanho dos elementos do seu layout usando o atributo size.

size="flex"

Deixa um elemento ocupar todo o espaço disponível.

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

O mesmo comportamento é válido para layouts verticais.

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

Note que para um elemento com flex se esticar corretamente, o contâiner precisa ter uma altura definida.

size="1...12"

Por padrão, todos os elementos do layout dividem a mesma largura. Se você quiser que alguns elementos ocupem mais espaço, você pode definir sua taxa de ocupação relativa aos demais elementos. Por exemplo, veja abaixo o que você precisa fazer para que Beta tenha o dobro do tamanho de Alpha, e Charlie tenha três vezes seu espaço.

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

size="none"

Deixa o elemento ocupar apenas o espaço necessário para apresentar seu conteúdo. Funciona muito bem com Javascript para remover o comportamento do flex.

limited

Você também pode limitar o tamanho máximo utilizado por um layout. O atributo limited limita o tamanho de um layout interno e o alinha no centro (quando necessário).

<layout align="center" limited>
    <layout>
        <row>Alpha</row>
        <row>Beta</row>
    </layout>
</layout>

Para alterar a medida da largura máxima, você precisa apenas declarar o valor da variável $limit antes de importar o upDRY.css em sua folha de estilo Sass. Por padrão, a largura máxima é de 1200px.