The <grid> element is essentially the xul equivalent of a table. Like HTML tables, grids provide a flexible way to organize and position child elements. <grid> is based on the same model that XUL boxes are. Here is a
simple example of a grid:
<grid>
<columns>
<column flex="1"/>
<column flex="1"/>
</columns>
<rows>
<row flex="1">
<button value="cell1"/>
<button value="cell2" style="background-color: lightgrey;"/>
</row>
<row flex="1">
<button value="cell3"style="background-color: lightblue;"/>
<button value="cell4"/>
</row>
</rows>
</grid>
|  |
This is an example of a grid with 2 flexible columns and 2 flexible rows.
An interesting feature of grid is that it does not matter whether you place items in the column or the
row tag. In either case, the items appear as defined in their parent. For example you could do this:
<grid>
<rows>
<row flex="1"/>
<row flex="1"/>
</rows>
<columns>
<column flex="1">
<button value="cell1"/>
<button value="cell2"/>
</column>
<column flex="1">
<button value="cell3"/>
<button value="cell4"/>
</column>
</columns>
</grid>
|
You can also mix the two:
<grid>
<columns>
<column flex="1">
<button value="column-cell1"/>
<button value=" column-cell2"/>
</column>
<column flex="1">
<button value="column-cell3"/>
<button value="column-cell4"/>
</column>
</columns>
<rows>
<row flex="1">
<button value="cell1"/>
<button value="cell2"/>
</row>
<row flex="1">
<button value="cell3"/>
<button value="cell4"/>
</row>
</rows>
</grid>
|
This will place cell1-4 on top of column-cell1-4.
How grids are different than tables:
- Both columns and rows can have different flexibilies.
- Grids do not have a <td> equivalent
- Grids are 100% xul based and follow the same rules as boxes.
- You can place things in both rows and columns
Current limitiations:
- Placing borders on rows and columns mess up the grids layout. This will be fixed soon
- Spans are currently not supported but are currently in works.
|