Grid

Boxes allow to subdivide interfaces in panels and to set the orientation inside those, but they do not make it possible to position the elements as does it the table tag in HTML. However XUL has an object for that which is the grid tag.
The width of the columns and the height of the lines depend on the flex attribute which indicates the percentage of the place occupied by elements. The flex attribute placed both in rows and columns makes it possible to give at the same time vertical and horizontal flexibility to cells. However the grid object is more complex to use than boxes.

Elements of grid

grid

Global container, near to the table tag of HTML.

rows

Horizontal container, equivalent to tr of HTML, and which contains row objects.

row

A line of the table. It makes it possible to align horizontally other graphic components.

columns

Vertical container which contains column tags.

column

A column of the table.

Structure of a grid

It differs from that of a table, and that is intended to ease dimensioning of the grid.
The definition of a grid starts with the list of columns, in the columns container. That makes it possible to define the width of the columns with the flex attribute.
Then a rows container which contains row tags or others XUL widgets. The row tag makes it possible to align a set of objects horizontally.
That gives the following overall structure:

<grid>
    <columns>
    <column flex="" />
        ... more column if any...
    </columns>
    <rows>
        <row flex="" />
        ... more row if any or other widgets...
    </rows>
</grid>

Inside rows or inside a row, may be included box, hbox or vbox to organize the contents.

It is possible to reverse the roles between the columns and rows containers. One can place the components inside the column while one uses rows to indicate the number of lines.
If the number of elements in columns matches the number of row, each element of the columns will be placed inside a line.
If one put elements at the same time inside rows and columns, they would be superimposed.

Example of grid

We do apply preceding principles by defining an interface with a narrow side panel on the left, a thin strip in bottom and a broad panel, flexible on all ways into the remainder of the window.

The overall structure, with the flex attributes, will be as follows:

<grid flex="1">
    <columns>
        <column flex="1" />
        <column flex="12" />
    <columns>
    <rows>
        <row flex="12" />
        <row />
    </rows>
</grid>

The main panel always fill the windows. The sidebar vary in height but remain narrow. The lower line is flexible only horizontally and fixed otherwise.
Buttons are used to emphasize the subdivision, but in practice, boxes would be used instead.

• Demo code.zip.