# qooxdoo

## Universal JavaScript Framework

### Navigation

- index
- next |
- previous |
- » Home »
- qooxdoo v1.6 documentation »
- Table of Contents »
- References »
- Layout Reference »

# Grid

The grid layout manager arranges the items in a two dimensional grid. Widgets can be placed into the grid's cells and may span multiple rows and columns.

## Preview Image

This image show two nested grids with column and row spans.

## Features

- Flex values for rows and columns
- Minimal and maximal column and row sizes
- Manually setting of column and row sizes
- Horizontal and vertical alignment
- Horizontal and vertical spacing
- Column and row spans
- Auto-sizing

## Description

The grid arranges the child widgets in a two dimensional grid. Each child is associated with a grid `column` and `row`. Widgets can span multiple cells by setting the `colSpan` and `rowSpan` layout properties. However each grid cell can only contain one widget. Thus child widgets can never overlap.

The grid computes the preferred with/height of each column/row based on the preferred size of the child widgets. The computed column widths and row heights can be overridden by explicitly setting them using setColumnWidth and setRowHeight. Minimum and maximum sizes for columns/rows can be set as well.

By default no column or row is stretched if the available space is larger/smaller than the needed space. To allow certain rows/columns to be stretched each row/column can have a flex value.

## Layout properties

- row (Integer): The row of the cell the widget should occupy. Each cell can only contain one widget. This layout property is mandatory.
- column (Integer): The column of the cell the widget should occupy. Each cell can only contain one widget. This layout property is mandatory.
- rowSpan (Integer): The number of rows, the widget should span, starting from the row specified in the `row` property. The cells in the spanned rows must be empty as well. (defaults to `1`)
- colSpan (Integer): The number of columns, the widget should span, starting from the column specified in the `column` property. The cells in the spanned columns must be empty as well. (defaults to `1`)

## Alternative Names

- QGridLayout (Qt)
- Grid (XAML)
- TableLayout (ExtJS)

## Demos

Here are some links that demonstrate the usage of the layout:

- Simple grids
- Complex grids
- A grid with different cell alignments
- An animated grid

## API

Here is a link to the API of the layout manager:
qx.ui.layout.Grid