Example of layout markup

This example shows the three kinds of elements (layout container, layout item, and layout policy) working together.

<div data-g-layout-container='"verticalSpacing": 6'>
  <div data-g-layout-item='"columnSpan": 2'>
    <span>The header text.</span>
  </div>
  <div data-g-layout-item='"row": 1'>
    <span>Name: </span>
  </div>
  <div data-g-layout-item='"row": 1, "column": 1'>
    <input data-g-layout-policy='"widthHint": "12*", "widthPolicy": "Fixed"' />
  </div>
</div> 

In this example, you have a container with three (3) items, laid out in a grid of 2 columns and 2 rows. The third item has a child with a policy constraint: it wants a length of 12 cells, be stretchable, and a fixed width policy. The other items don’t have any constraints and therefore take the desired size of their content.