Note: This page is about Grids in Mozilla's XUL Technology. If you are looking for information on CSS Grids, you should go to our CSS Grid Layout page instead.
« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

A grid is a layout type that arranges elements in rows and columns. The grid is expected to contain both a columns element as a child which defines the structure of the columns and a rows element as child to define the rows. The size and attributes defined on columns and rows will affect the size and placement of elements in each cell. Elements placed within both the columns and rows will be displayed, although usually only elements will be placed inside one of these. It is most common to place elements within the rows and use the columns only to define their flexibility and width. Whichever of the columns and rows is last in the grid is displayed on top; commonly the columns element appears in the grid first.

More information is available in the XUL tutorial.

Example

Image:XUL_ref_grid.png
<!-- groupbox containing a grid.
     The second column is twice as big as the first column -->
<groupbox>
  <caption label="Details"/>
  <grid>
    <columns>
      <column flex="1"/>
      <column flex="2"/>
    </columns>
    <rows>
      <row>
        <label value="User name"/>
        <textbox id="user"/>
      </row>
      <row>
        <label value="Group"/>
        <menulist>
          <menupopup>
            <menuitem label="Accounts"/>
            <menuitem label="Sales" selected="true"/>
            <menuitem label="Support"/>
          </menupopup>
        </menulist>
      </row>
    </rows>
  </grid>
</groupbox>

Attributes

Inherited from XUL element
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

Properties

Inherited Properties
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width

Methods

Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
Elements
columns, column, rows, row.