Structure

<layout />

It's a container. Use it whenever you intent to define a new layout structure.

<layout></layout>

The layout could be an element or an attribute, if you coudn't use it that way.

<columns /> or <rows />?

Inside of it, you should place two elements: columns or rows. Be default, you'll have a horizontal layout structure.

<layout>
    <column>Alpha</column>
    <column>Beta</column>
    <column>Charlie</column>
</layout>

You can also use orientation="horizontal".

If you set the orientation to vertical, you'll have... That's right! A vertical layout structure.

<layout orientation="vertical">
    <row>Alpha</row>
    <row>Beta</row>
    <row>Charlie</row>
</layout>

Did you notice the column and the row elements? What those two elements are doing is... nothing at all. They will only help your code to be semantic. Seriously, their behavior in nothing more special than a regular div. In fact, the <layout> (and its mode orientation) does all the job.

You can also reverse it, both ways.

<layout orientation="reverse">
    <column>Alpha</column>
    <column>Beta</column>
    <column>Charlie</column>
</layout>

You can also set it as orientation="reverse-horizontal".

<layout mode="reverse-vertical">
    <row>Alpha</row>
    <row>Beta</row>
    <row>Charlie</row>
</layout>

Use orientation="auto-vertical" in responsive designs if you want elements laid out horizontally when the display is wide or vertically when narrow.

It will automatically change it based on the break point set on the framework.

<layout orientation="auto-vertical">
    <div>Alpha</div>
    <div>Beta</div>
    <div>Charlie</div>
</layout>

Notice that in this case, we prefer to use regular <div /> instead of columns or rows. That's because this element will behave differently depending of the device. We can't predict it.