GridLayout

A GridLayout object for configuring a layout consisting of a grid of rows and columns of variable heights and widths.

Overview

If you have content that needs to be organised into a grid of rows and columns, then you can use a GridLayout. You can configure the number of rows and columns and their heights and widths. You can then configure what contents get inserted into each grid cell.

For more information, see Frame layouts and contents.

Examples

The example below shows a frame with a grid layout with three rows and two columns. This results in a grid with six cells.

The heights property sets three row heights: the top row is 100px high, the middle row is “auto” high, and the bottom row is 50px high. The widths property sets two column widths: the first column is 300px wide, and the second is “auto” wide. (The “auto” dimensions mean the dimension is automatically set based on the content).

The areas property then places content blocks into the grid cells.

  • A header is placed in the first row, across two cells.
  • A control panel is placed in the first column of the second row.
  • A viewer is placed in the second column of the second row.
  • A footer is placed in the third row, across two cells.

Finally, the overlayAreas property overlays additional content blocks onto on top of the areas.

  • Some results are overlaid on top of the viewer (second column of the second row).
  • All the other cells have an empty string ("") and therefore have no overlay content.

(The various blocks in contents are not defined yet.)

kind: Frame
layout:
  kind: GridLayout
  heights: 
    - 100px
    - auto
    - 50px
  widths: [300px, auto] 
  areas: 
    - [my-header, my-header]
    - [my-control-panel, my-viewer]
    - [my-footer, my-footer]    
  overlayAreas: # OPTIONAL
    - ["", ""]
    - ["", my-results]
    - ["", ""]
contents:
  my-header:
    # define the header
  my-control-panel:
    # define the control panel
  my-viewer:
    # define the viewer
  my-footer:
    # define the footer   
  my-results:
    # define some results, to be pverlaid on top of the viewer           

Object table

Name Type Required
kind Constant: GridLayout yes
heights Array yes
areas Array yes
widths Array yes
overlayAreas Array no

Object properties

  • Object with the following properties:
    • kind (required): Constant GridLayout
    • heights (required): The heights of the rows in the grid
      • List of string
    • areas (required): The contents placed in a 2d grid, each array represents a row
      • List of :
        • List of string
    • widths (required): The widths of the columns in the grid
      • List of string
    • overlayAreas (optional): The contents placed in a overlaying 2d grid. The areas and overlay areas need to have the same structure of columns and rows
      • List of :
        • List of string