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]
heights can be defined with different grid size types .
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]