Lay Out a Page

The layout tags determine the layout and structure of the page. Using these ensures that the application will work equally well on desktops, mobiles and other devices (like high-resolution screens).

App Studio uses a grid layout to control how large sections appear on the screen, and how they behave when the visible area or resolution changes.

A simple grid:

<layout:grid>
  <layout:block small="1-2" large="1-4">
    Narrow section on large screens.
  </layout:block>
  <layout:block small="1-2" large="3-4">
    Wide on large screens.
  </layout:block>
</layout:grid>

See the following reference topics for complete information about layout tags: