Skip to main content
Rows and Columns arrange children in a single line. Grid and Stack cover two other common patterns: a Grid places children in cells across columns and rows, and a Stack layers children on top of each other in the same space. To use either one, select a Layout and set its layout type to Grid or Stack in the Inspector. See Layout type.

​
Grid

A Grid Layout arranges its children in cells made of columns and rows. Use a Grid when content should line up in two directions, such as an inventory screen, a photo gallery, or a dashboard of cards. A new Grid starts with one column and one row. Add columns and rows in the Inspector to build out the grid. While the Grid is selected, the stage shows guides for each cell and shading for the gaps between them.

​
Sizing columns and rows

Each column and row (or track) has its own size. Tracks use the same scale types as Layouts, applied to the whole column or row:
  • Fill: The track takes a share of the leftover space, measured in fr (fill ratio) units. Three columns set to 1fr split the width equally, while a 2fr column takes twice the space of a 1fr column. New tracks use 1fr.
  • Fixed: The track has a set width or height, in points or as a percentage of the Grid.
  • Hug: The track shrinks or grows to fit the largest child inside it.
Drag tracks to reorder them. To edit several tracks at once, hold Shift and click their track numbers. To add space between columns and rows, use the Grid’s gap. The horizontal gap separates columns, and the vertical gap separates rows.

​
Placing children in cells

Children are placed into the Grid in hierarchy order. Each row is filled from left to right before moving to the next row. To control where a child goes, select the child and use the Grid Cell options in the Inspector:
  • Cell: The column and row to place the child in. By default, children are placed automatically in the next available cell.
  • Span: The number of columns or rows the child covers.
When a child spans more than one cell, the children after it move on to the next available cells. If there are more children than cells, Rive adds rows to fit them. To control the size of those extra rows, add them to the Grid yourself and set their scale type. To make a child fill its whole cell, set its width and height to Fill.
A component instance in Layout mode set to Fill fills its cell, but can’t use Grid Cell options such as Span. To span a component across cells, wrap the instance in a Layout, set that Layout’s width and height to Fill, and set the span on the Layout.

​
Animating a Grid

You can key track sizes, gaps, and Grid Cell spans and positions, which lets you animate children moving to new cells. The number of columns and rows can’t be animated.

​
Stack

A Stack Layout places all of its children in the same space, layered on top of each other. Use a Stack for anything made of layered parts, such as a card with a background, artwork, and a label, or a button with an icon over a shape. Children are drawn in hierarchy order. The topmost child in the Hierarchy is drawn in front, and the bottommost child is drawn at the back.

​
Sizing and positioning layers

Each child’s size decides how much of the Stack it covers:
  • Fill: The child covers the whole Stack. Use Fill for backgrounds and for layers that use their own padding and alignment to place their content.
  • Fixed or Hug: The child keeps its own size, and the Stack’s alignment decides where it sits.
Layers follow the same sizing rules as children in a Row or Column. See Sizing and positioning. Content larger than the Stack overflows based on its alignment. A centered Stack overflows equally on all sides, while a Stack aligned to the bottom-left overflows up and to the right.