The Layout panel allows you to control properties for each cell in a Layout Grid.
For example, by clicking a cell in a Layout Grid, you can use the Layout panel located at the bottom of the screen, to make the following design changes.
- Span a cell across multiple columns or rows.
- Specify cell width as a percentage of the width of the Klip, or by specifying the number of pixels.
- Specify cell height in pixels.
- Vertically align cell content.
- Change padding - the space around a component when added to the cell.
The Layout panel is also available beside the Properties panel at the bottom of the screen after you have selected a component in a cell within the Layout Grid.
Spanning across rows and columns
Take in account the following points when using spanning across rows and columns.
- Cells that are spanned, lose their custom width or height, and instead take on the widths and heights of the cells that are being spanned.
- Select the left-most cell that you want to include when spanning horizontally. By doing this, it will merge that cell with other cells to the right.
- Select the upper-most cell that you want to include when spanning vertically. By doing this, it will merge that cell with other cells below.
- If you want to span across cells that have already been included in a span, you will need to remove the original spanning. For example, where you have three cells in a row and you have set spanning on cells two and three. If you want to also include cell one, you will need to separate the original span, and then select cells one and span across cells two and three.
Now that you know more about the Layout panel, check out the following tutorial:
These articles provide an overview of important concepts for building Klips with multiple components:
- Design tips for creating Klips with multiple components
- Klip versus Component
- Component Palette
- Layout Grid
- Separator component
- Label component
- Controls Palette
- How to use padding options