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:

var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4, 
  panel5, panel6, panel7, panel8, panel9 ], { 
  widths: [ 1/3 , 1/3, 1/3 ],
  heights: [ 1/2 , 1/4,  1/4 ]
} );

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.

<!-- An example of a grid layout with four panels. -->
<style>
body {
  font-family: sans-serif;
  font-size: 0.875em;
}
.container {
  top: 20px;
  left: 20px;
  width: 400px;
  height: 300px;
  border-style: dotted;
  border-width: 1px;
  padding: 20px;
}
.blue {
  background-color: #ccccff;
}
.green {
  background-color: #ccffcc;
}
</style>
<script>
// Create PanelLayouts to add to the GridLayout.
var panel1 = new OO.ui.PanelLayout( {
  $content: $( '<p>Panel One</p>'), 
  classes: ['blue']
 });
 
 var panel2 = new OO.ui.PanelLayout( { 
  $content: $( '<p>Panel Two</p>' ), 
  classes: ['green']
 });
 
 var panel3 = new OO.ui.PanelLayout( { 
  $content: $( '<nowiki><p>Panel Three</p>' ),
  classes: ['green']
 });
 
 var panel4 = new OO.ui.PanelLayout( { 
  $content: $( '<nowiki><p>Panel Four</p>' ),
  classes: ['blue']
 });
 
// Create a GridLayout. 
var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4 ], { 
  classes: [ 'container' ],
  widths: [ 1/2 , 1/2 ],
  heights: [ 1/2 ,  1/2 ]
} );
$( 'body' ).append( grid.$element );
</script>

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.