OOUI/Layouts/Grids

A GridLayout contains PanelLayouts, which are arranged in rows and columns. The arrangement of the panels as well as their size can be updated dynamically with the update method.

The number of rows and columns in the grid is reflected in the grid’s widths and heights configuration options, which are also used to determine the relative size of each row and column. Both widths and heights are specified as ratios. To create a grid with two equal columns, for example, specify [ 1,1 ]—or [10, 10] or [1/2, 1/2], the numbers are internally scaled—for the widths config.

To create a three by three grid, one could use the following settings: Note that the GridLayout requires an array of panels, which must be specified before the other configuration settings. The length of the panel array must equal the number of grid cells (9, in this example).

 Individual PanelLayouts can be configured as well. Add padding between the edge of the panel layout and its content by setting padded to ‘true’ or allow vertical scrolling by setting scrollable to ‘true’. By default, all PanelLayouts are expanded to fill their parent element. When the grid container resizes, the panels will resize to fill the new dimensions. 

GridLayout methods can be used to set the grid dimensions (layout method), to get a panel at a specified position (getPanel method), or to update the size of the cells or their position (update method). For a full list of supported methods and configuration options, please see the code-level documentation.