Working with Widgets > 2D > Grid Layout
  
Grid Layout
What Does This Widget Do?
The Grid Layout widget allows you to display any data set in a grid view.
When Should I Use This Widget?
Use a Grid Layout when you want to arrange information in a table format.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
Property
JavaScript
Type
Description
Rows Divide Available Height Evenly
evenlyspacedrows
boolean
Select this checkbox to make all rows the same height.
Fixed Column Size
(Column property)
* 
This property is displayed when you select the column under a grid layout in the project tree.
N/A
N/A
Specifies the width of a column. By default, the space is divided evenly among the columns.
Flex Direction
(Column property)
* 
This property is displayed when you select the column under a grid layout in the project tree.
N/A
N/A
You can nest another Grid Layout widget inside of a column. Flex direction defines which direction additional rows flow in.
Row Height (in px)
(Row property)
* 
This property is displayed when you select the row under a grid layout in the project tree.
N/A
N/A
Specifies the space between the border and edge.
The following actions are available with this widget.
• Add Column
• Add Row
The Widget in Action
Here’s an example of what your widget might look like!
Minimum Steps Required for Use
What It Looks Like
1. Drag and drop a Grid Layout widget onto the canvas.
2. Click Add Row to add the number of rows you want. For this example, we’ve added three more rows.
3. To add columns to a row, select the row, and click Add Column in the DETAILS pane. For this example, we’ve added one more column to the last three rows.
4. Drag and drop the widgets you want displayed in the different cells. For this example, we’ve used Label widgets for the text, and Image widgets for the graphics.