GridLayout Properties

Control grid layout manager behavior

Grid layout managers position UI components along the rows and columns of an invisible grid that spans the entire figure or a container within the figure. By changing property values of a grid layout, you can modify certain aspects of its behavior. Use dot notation to refer to a specific object and property:

fig = uifigure;
g = uigridlayout(fig);
g.ColumnWidth = {100,'1x'};

Grid

ColumnWidth — Column width

{'1x','1x'} (default) | cell array | string array | numeric array

Column width, specified as a cell array containing either 'fit', numbers, or numbers paired with 'x' characters. You can specify any combination of values. The number of elements in the cell array controls the number of columns in the grid. For example, to create a 4-column grid, specify a 1-by-4 cell array. Column width can be specified as a string array or numeric array, only if the elements specified are of the same type, like ["1x" "2x" "1x"] or [100 200 50].

There are three different types of column widths:

• Fit width — Specify 'fit'. Column width automatically adjusts to fit its contents. For text-based components, 'fit' width adjusts with font properties to show the whole text. For non text-based components, 'fit' width is based on the default size of the component and other factors. Use 'fit' width if you want to avoid hard-coding the column width to fit components, or if your app is translated to another language or runs on different platforms.

• Fixed width in pixels — Specify a number. The column width is fixed at the number of pixels you specify. When the parent container resizes, the column width does not change.

• Variable width — Specify a number paired with an 'x' character (for example, '1x'). When the parent container resizes, the column width grows or shrinks. Variable-width columns fill the remaining horizontal space that the fixed-width columns do not use. The number you pair with the 'x' character is a weight for dividing up the remaining space among all the variable-width columns. If the grid has only one variable-width column, then it uses all the remaining space regardless of the number. If there are multiple variable-width columns that use the same number, then they share the space equally. Otherwise, the amount of space is proportional to the number.

For example, {'fit',200,'2x','1x'} specifies that the width of the first column is sized to fit its content, the second column is fixed at 200 pixels, and the last two columns share the remaining horizontal space. The third column uses twice as much space as the fourth column.

Changing certain aspects of a layout can affect the value of this property. For example, adding more components to a fully populated grid changes the size of the grid to accommodate the new components.

Changing the ColumnWidth property on a grid layout that already contains components does not change the layout of the components. For example, if you try to dynamically delete a column that contains components, the ColumnWidth property does not change until you move those components out of that column.

RowHeight — Row height

{'1x','1x'} (default) | cell array | string array | numeric array

Row height, specified as a cell array containing either 'fit', numbers, or numbers paired with 'x' characters. You can specify any combination of values. The number of elements in the cell array controls the number of rows in the grid. For example, to create a grid that has 4 rows, specify a 1-by-4 cell array. Row height can be specified as a string array or numeric array, only if the elements specified are of the same type, like ["1x" "2x" "1x"] or [100 200 50].

There are three different types of row heights:

• Fit height — Specify 'fit'. Row height automatically adjusts to fit its contents. For text-based components, 'fit' height adjusts with font properties to show the whole text. For non text-based components, 'fit' height is based on the default size of the component and other factors. Use 'fit' height if you want to avoid hard-coding the row height to fit components, or if your app is translated to another language or runs on different platforms.

• Fixed height in pixels — Specify a number. The row height is fixed at the number of pixels you specify. When the parent container resizes, the row height does not change.

• Variable height — Specify a number paired with an 'x' character (for example, '1x'). When the parent container resizes, the row grows or shrinks. Variable-height rows fill the remaining vertical space that the fixed-height rows do not use. The number you pair with the 'x' character is a weight for dividing up the remaining space among all the variable-height rows. If the grid has only one variable-height row, then it uses all the remaining space regardless of the number. If there are multiple variable-height rows that use the same number, then they share the space equally. Otherwise, the amount of space is proportional to the number.

For example, {'fit',200,'2x','1x'} specifies that the height of the first row is sized to fit its content, the second row is fixed at 200 pixels, and the last two rows share the remaining vertical space. The third row uses twice as much space as the fourth row.

Changing certain aspects of a layout can affect the value of this property. For example, adding more components to a fully populated grid changes the size of the grid to accommodate the new components.

Changing the RowHeight property on a grid layout that already contains components does not change the layout of the components. For example, if you try to dynamically delete a row that contains components, the RowHeight property does not change until you move those components out of that row.

ColumnSpacing — Column spacing

10 (default) | number

Column spacing, specified as a scalar number of pixels between adjacent columns in the grid. The number you specify applies to all columns.

RowSpacing — Row spacing

10 (default) | number

Row spacing, specified as a scalar number of pixels between adjacent rows in the grid. The number you specify applies to all rows.

Padding — Padding

[10 10 10 10] (default) | [left bottom right top]

Padding around the outer perimeter of the grid, specified as a vector of the form [left bottom right top]. The elements of the vector are described in the table below.

Vector Element	Description
left	Distance in pixels between the inner left edge of the parent container and the left edge of the grid.
bottom	Distance in pixels between the inner bottom edge of the parent container and the bottom edge of the grid.
right	Distance in pixels between the inner right edge of the parent container and the right edge of the grid.
top	Distance in pixels between the inner top edge of the parent container and the top edge of the grid. The inner top edge of the parent container starts below all decorations such as titles, tab labels, or menu bars.

Color

BackgroundColor — Background color

[0.94 0.94 0.94] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

• An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example, [0.4 0.6 0.7].

• A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes '#FF8800', '#ff8800', '#F80', and '#f80' are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color Name	Short Name	RGB Triplet	Hexadecimal Color Code	Appearance
'red'	'r'	[1 0 0]	'#FF0000'
'green'	'g'	[0 1 0]	'#00FF00'
'blue'	'b'	[0 0 1]	'#0000FF'
'cyan'	'c'	[0 1 1]	'#00FFFF'
'magenta'	'm'	[1 0 1]	'#FF00FF'
'yellow'	'y'	[1 1 0]	'#FFFF00'
'black'	'k'	[0 0 0]	'#000000'
'white'	'w'	[1 1 1]	'#FFFFFF'

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB^® uses in many types of plots.

RGB Triplet	Hexadecimal Color Code	Appearance
[0 0.4470 0.7410]	'#0072BD'
[0.8500 0.3250 0.0980]	'#D95319'
[0.9290 0.6940 0.1250]	'#EDB120'
[0.4940 0.1840 0.5560]	'#7E2F8E'
[0.4660 0.6740 0.1880]	'#77AC30'
[0.3010 0.7450 0.9330]	'#4DBEEE'
[0.6350 0.0780 0.1840]	'#A2142F'

Interactivity

Visible — Visibility of children

'on' (default) | on/off logical value

Visibility of children, specified as 'on' or 'off'. , or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

Set this property to 'off' to hide all child components in the grid and their descendants. The children and their descendants are hidden regardless of the value of their Visible properties. When components are hidden, you can get and set their properties even though they do not appear in the app.

When you set this property to 'on', the children and their descendants are visible only if their Visible properties are also set to 'on'.

Setting the Visible property on the grid does not change the values of the Visible properties of its descendants.

Scrollable — Ability to scroll

'off' (default) | on/off logical value

Ability to scroll, specified as 'off' or 'on', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

Setting this property to 'on' enables scrolling within the grid layout manager. In order to scroll, these conditions must also be met:

• The sum of the values specified for the 'RowHeight' property of the grid layout manager must be larger than the height of the parent container.

• The sum of the values specified for the 'ColumnWidth' property of the grid layout manager must be larger than the width of the parent container.

• At least one row or column of the grid layout manager must be set to a fixed pixel height or width.

• The grid layout manager must contain components.

Certain types of charts and axes do not support scrollable containers. However, you can place the chart or axes in a nonscrollable panel, and then place the panel in the scrollable container. For more information, see Display Graphics in App Designer.

ContextMenu — Context menu

empty GraphicsPlaceholder array (default) | ContextMenu object

Context menu, specified as a ContextMenu object. Use this property to display a context menu when you right-click on the grid layout manager. Create the context menu using the uicontextmenu function.

Position

Layout — Layout options

empty LayoutOptions array (default) | GridLayoutOptions object

Layout options, specified as a GridLayoutOptions object. This property specifies options for a nested grid layout container. If the grid layout is not a child of another grid layout container (for example, it is a child of a figure or panel), then this property is empty and has no effect. However, if the grid layout is a child of another grid layout, you can place that child grid in the desired row and column of the parent grid by setting the Row and Column properties on the GridLayoutOptions object.

For example, this code nests grid2 in the third row and second column of grid1.

grid1 = uigridlayout([4 3]);
grid2 = uigridlayout(grid1);
grid2.Layout.Row = 3;
grid2.Layout.Column = 2;

To make the child grid span multiple rows or columns of its parent grid, specify the Row or Column property as a two-element vector. For example, this command spans grid2 over columns 2 through 3 of grid1:

grid2.Layout.Column = [2 3];

Callbacks

CreateFcn — Creation function

'' (default) | function handle | cell array | character vector

Object creation function, specified as one of these values:

• Function handle.

• Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

• Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB creates the object. MATLAB initializes all property values before executing the CreateFcn callback. If you do not specify the CreateFcn property, then MATLAB executes a default creation function.

Setting the CreateFcn property on an existing component has no effect.

If you specify this property as a function handle or cell array, you can access the object that is being created using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

DeleteFcn — Deletion function

'' (default) | function handle | cell array | character vector

Object deletion function, specified as one of these values:

• Function handle.

• Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

• Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB deletes the object. MATLAB executes the DeleteFcn callback before destroying the properties of the object. If you do not specify the DeleteFcn property, then MATLAB executes a default deletion function.

If you specify this property as a function handle or cell array, you can access the object that is being deleted using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Callback Execution Control

Interruptible — Callback interruption

'on' (default) | on/off logical value

Callback interruption, specified as 'on' or 'off', or as numeric or logical 1 (true) or 0 (false). A value of 'on' is equivalent to true, and 'off' is equivalent to false. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

This property determines if a running callback can be interrupted. There are two callback states to consider:

• The running callback is the currently executing callback.

• The interrupting callback is a callback that tries to interrupt the running callback.

MATLAB determines callback interruption behavior whenever it executes a command that processes the callback queue. These commands include drawnow, figure, uifigure, getframe, waitfor, and pause.

If the running callback does not contain one of these commands, then no interruption occurs. MATLAB first finishes executing the running callback, and later executes the interrupting callback.

If the running callback does contain one of these commands, then the Interruptible property of the object that owns the running callback determines if the interruption occurs:

• If the value of Interruptible is 'off', then no interruption occurs. Instead, the BusyAction property of the object that owns the interrupting callback determines if the interrupting callback is discarded or added to the callback queue.

• If the value of Interruptible is 'on', then the interruption occurs. The next time MATLAB processes the callback queue, it stops the execution of the running callback and executes the interrupting callback. After the interrupting callback completes, MATLAB then resumes executing the running callback.

Note

Callback interruption and execution behave differently in these situations:

• If the interrupting callback is a DeleteFcn, CloseRequestFcn, or SizeChangedFcn callback, then the interruption occurs regardless of the Interruptible property value.

• If the running callback is currently executing the waitfor function, then the interruption occurs regardless of the Interruptible property value.

• If the interrupting callback is owned by a Timer object, then the callback executes according to schedule regardless of the Interruptible property value.

Note

When an interruption occurs, MATLAB does not save the state of properties or the display. For example, the object returned by the gca or gcf command might change when another callback executes.

BusyAction — Callback queuing

'queue' (default) | 'cancel'

Callback queuing, specified as 'queue' or 'cancel'. The BusyAction property determines how MATLAB handles the execution of interrupting callbacks. There are two callback states to consider:

• The running callback is the currently executing callback.

• The interrupting callback is a callback that tries to interrupt the running callback.

The BusyAction property determines callback queuing behavior only when both of these conditions are met:

• The running callback contains a command that processes the callback queue, such as drawnow, figure, uifigure, getframe, waitfor, or pause.

• The value of the Interruptible property of the object that owns the running callback is 'off'.

Under these conditions, the BusyAction property of the object that owns the interrupting callback determines how MATLAB handles the interrupting callback. These are possible values of the BusyAction property:

• 'queue' — Puts the interrupting callback in a queue to be processed after the running callback finishes execution.

• 'cancel' — Does not execute the interrupting callback.

BeingDeleted — Deletion status

on/off logical value

This property is read-only.

Deletion status, returned as an on/off logical value of type matlab.lang.OnOffSwitchState.

MATLAB sets the BeingDeleted property to 'on' when the DeleteFcn callback begins execution. The BeingDeleted property remains set to 'on' until the component object no longer exists.

Check the value of the BeingDeleted property to verify that the object is not about to be deleted before querying or modifying it.

Parent/Child

Parent — Parent container

Figure object (default) | Panel object | Tab object | ButtonGroup object | GridLayout object

Parent container, specified as a Figure object created using the uifigure function, or one of its child containers: Tab, Panel, ButtonGroup, or GridLayout. If no container is specified, MATLAB calls the uifigure function to create a new Figure object that serves as the parent container.

Children — Children

empty GraphicsPlaceholderArray | array of UI component objects

Children, returned as an array of UI component objects. Use this property to view the list of children or to reorder the children by setting the property to a permutation of itself. You cannot add or remove children using this property. To add a child to this list, set the Parent property of the child UI component.

Reordering the children has no effect on the location of the components in the grid. To change the location of a component in a grid, set its Layout property.

HandleVisibility — Visibility of object handle

'on' (default) | 'callback' | 'off'

Visibility of the object handle, specified as 'on', 'callback', or 'off'.

This property controls the visibility of the object in its parent's list of children. When an object is not visible in its parent's list of children, it is not returned by functions that obtain objects by searching the object hierarchy or querying properties. These functions include get, findobj, clf, and close. Objects are valid even if they are not visible. If you can access an object, you can set and get its properties, and pass it to any function that operates on objects.

HandleVisibility Value	Description
'on'	The object is always visible.
'callback'	The object is visible from within callbacks or functions invoked by callbacks, but not from within functions invoked from the command line. This option blocks access to the object at the command-line, but allows callback functions to access it.
'off'	The object is invisible at all times. This option is useful for preventing unintended changes to the UI by another function. Set the HandleVisibility to 'off' to temporarily hide the object during the execution of that function.

Identifiers

Type — Type of graphics object

'uigridlayout'

This property is read-only.

Type of graphics object, returned as 'uigridlayout'.

Tag — Object identifier

'' (default) | character vector | string scalar

Object identifier, specified as a character vector or string scalar. You can specify a unique Tag value to serve as an identifier for an object. When you need access to the object elsewhere in your code, you can use the findobj function to search for the object based on the Tag value.

UserData — User data

[] (default) | array

User data, specified as any MATLAB array. For example, you can specify a scalar, vector, matrix, cell array, character array, table, or structure. Use this property to store arbitrary data on an object.

If you are working in App Designer, create public or private properties in the app to share data instead of using the UserData property. For more information, see Share Data Within App Designer Apps.

Version History

Introduced in R2018b