Grid layout

To create more advanced frame layouts, a grid layout can be used. It provides flexibility for using both columns and rows to define the frame layout.

To create a frame similar to the image above, the layout should be defined like the example below.

layout:
  kind: GridLayout
  widths:
    - [2fr,1fr]
  heights:
    - 1fr
    - 1fr
    #or [1fr,1fr,]
  areas:
    - [area1, area2]
    - [area1, area3]

💡 The widths and heights can be defined with different grid size types .

Overlay Areas

To overlay contents on top of other contents, grid layouts with overlay areas can be used. The areas and overlay areas need to have the same structure of columns and rows.

The example below shows how to configure this type of layout.

layout:
  kind: GridLayout
  widths:
    - [2fr,1fr]
  heights:
    - 1fr
    - 1fr
    - 30px
  areas:
    - [area1, area2]
    - [area1, area3]
    - [area1, area3]
  overlayAreas:
    - ["", ""]
    - ["", ""]
    - [area4, area4]