> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Parameters
> Layout parameters can broadly be grouped into one of two categories — those that affect the parent layout, and those that affect the child layouts.
export const UseCase = ({title, children}) => {
return ;
};
export const YouTube = ({id, timestamp}) => {
const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
return ;
};
In Rive, it's important to remember that layout parameters generally only affect other layout containers. This can often result in the nesting of layouts for desired results, but unlocks opportunities to blend with Rive's more freeform canvas in creative ways.
***
## Absolute vs relative
To control the flow of child Layouts in a Row, Column, Grid, or Stack requires the Layout children to be Relative, i.e. not have their Absolute position option enabled. Use the icon in the top right of the Layout inspector to toggle between an Absolute and Relative Layout.
* **Absolute:** An Absolute Layout positions itself within an artboard or parent Layout container. It can have 2 or more of it’s edges pinned to the container.
* **Relative:** A Relative Layout has it’s position defined by the parent artboard or Layout. Changing the flex properties on the parent will determine the child layout behaviour.
## Scale types
A layout’s width and height can make use of 3 different scale behaviours:
* **Fixed:** A fixed width or height for the Layout. The defined value can be either a point or percentage value. Use the unit toggle within the fields to toggle between value types.
* **Hug:** The width and/or height of the Layout shrinks to fit its children. For example, you may want a Layout to hug a text object; resizing itself based on the length of the text inside.
* **Fill:** The width and/or height of the Layout expands to fill the available space within the parent Layout or artboard. The fill option switches the width/height fields to be represented in `fr` (fill ratio) units and reveals a base size field. The fill ratio values make it possible to control the fill behaviour between a number of children with the fill scale behaviour. For example, you may want the children to fill the available space equally, or perhaps have one child scale at a greater factor than the rest.
Options to set the scale type are below the width and height fields in the inspector.
Hug and Fill options will only surface when applicable. For example, a Layout without any children won’t surface the option to hug, while only a Layout with another Layout as its parent can be set to Fill.
## Size constraints
Use the icon above the absolute toggle to add minimum and/or maximum width and height values. As with the width and height values themselves, these can be defined as either points or percentages.
## Clip
The clip toggle hides any child elements within the layout that extend beyond the bounds of the Layout.
## Position (absolute Layouts only)
Absolute Layouts provide additional options to set their position within the artboard or parent Layout. The position is defined by at least 2 pinned edges — one horizontal and one vertical, however additional edges can also be enabled.
Set the desired edges to pin by selecting the markers within the inspector graphic, or via the fields below. You can hold `shift` while selecting a marker to add a second edge along the same axis. The distance values from a chosen edge can be provided as points or percentages by selecting the chosen unit type within the field.
## Padding and margin
Padding ONLY affects Layout children. For example if you want to have a button with a label, the text should be wrapped in a Layout and that Layout should be the child of another Layout that applies the padding.Margin affects the Layout to which the margin is applied relative to its parent Layout.
Padding and margin can be applied symmetrically along an axis, or to individual edges. Use the edge toggle to reveal fields for each edge plus options to use point or percent values.
* **Padding:** Inner space between the Layout bounds and any relative Layout children.
* **Margin:** Outer space between the Layout bounds and a relative parent Layout.
## Layout children
A layout’s flex parameters are only applied to its Layout children. Shapes, text, and images can become Layout children directly by selecting **Layout** instead of **Node** at the top of the **Inspector**. Other content, such as groups and paths, must be wrapped in an additional layout container to generate rows, columns, and grids of content that reflow.
## Layout type
The layout type determines how a Layout arranges its relative Layout children.
* **Row:** Lay out children along the horizontal axis.
* **Column:** Layout children along the vertical axis.
* **Row Reverse:** Lay out children horizontally, in reverse order.
* **Column Reverse:** Lay out children vertically, in reverse order.
* **Grid:** Lay out children in cells defined by columns and rows. See [Grid](#grid).
* **Stack:** Place all children in the same space, layered on top of each other. See [Stack](#stack).
## Grid
A Grid Layout arranges its children into columns and rows. When you set a Layout to Grid, it starts with one column and one row. Increase the number of columns and rows to build out the grid. While the Layout is selected, the stage shows guides for each cell and shading for the gaps between them.
Children are placed into the grid in hierarchy order, filling each row from left to right before moving to the next row.
### Columns and rows
Each column and row (or *track*) has its own size, using the same [scale types](#scale-types) as Layouts:
* **Fill:** The track expands to fill the available space, measured in `fr` (fill ratio) units. For example, three columns set to `1fr` share the width equally, while a `2fr` column takes twice the space of a `1fr` column.
* **Fixed:** The track has a fixed width or height.
* **Hug:** The track shrinks to fit the content inside it.
Drag tracks to reorder them. To edit several tracks at once, hold Shift and click their track numbers.
Use [Gap](#gap) to add space between columns and rows.
### Grid cell
Children of a Grid Layout show **Grid Cell** options in the inspector:
* **Position:** The column and row the child is placed in. By default, children are placed automatically in the next available cell.
* **Span:** The number of columns and/or rows the child occupies.
When a child spans multiple cells, the children after it are pushed to the next available cells. If there are more children than cells, Rive adds rows to fit them. To control how these extra rows are sized, add them to the grid explicitly and set their scale type.
To make a child fill its cell, set its width and height to **Fill**. A component instance in **Layout** mode set to Fill will fill its cell, but to use Grid Cell options such as span, wrap the instance in a Layout and give that Layout a Fill width and height.The number of columns and rows in a grid can't be animated. Track sizes, gaps, and Grid Cell spans and positions can be keyed, which lets you animate children reflowing within the grid.
## Stack
A Stack Layout places all of its children in the same space, layered on top of each other. Children are drawn in hierarchy order: the topmost child in the hierarchy is drawn in front, and the bottommost is drawn at the back.
Use [Alignment](#alignment) to position the children within the Stack. Children set to **Fill** expand to cover the whole Stack, while Fixed or Hug children are positioned by the alignment.
Stacks are useful for components made of layered parts.
An item card is a Stack with four layers: a badge, the item info, the item art, and a background. Each layer is a Layout set to Fill, so they all cover the card. Each layer uses its own padding and alignment to place its content: the badge sits in the top-left corner, and the item name and category are aligned to the bottom. An inventory screen then places these cards in a Grid, with one card spanning two columns.
## Wrap
Wrap applies to Row and Column Layouts.
* **No Wrap:** When the content reaches the bounds of the layout, continue to extend beyond it.
* **Wrap:** When the content reached the bounds of the layout, place the next item on below or alongside the currently row/column.
* **Wrap Reverse:** Same as wrap, but display the content in reverse order.
## Alignment
Select the desired point on the inspector widget to align content within a layout container.
## Justify
Click on the current alignment position to expand the content to fill the available space. Selecting the one of the active tiles again collapses the content back down.
## Gap
Spacing between content (gaps) can be set both horizontally and vertically, and as either points or percentages of the container width/height.
## Left-to-right/right-to-left
Determines the horizontal direction for this Layout and will also be cascaded down to its child Layouts (when its child Layouts are set to Inherit). This will change the direction of Row based Layouts as well as Text alignment within any Layouts. This is useful when there is a requirement to support Right-to-Left languages.
## Styles
Layouts can have fills, strokes, feathers, blend modes, and corner radii, just like other objects in Rive.
Styles can be rendered in the **background**, behind the Layout's children, or in the **foreground**, in front of them. For example, you might place a fill and feathered shadow behind the children while rendering a stroke in front.
Corner radius applies to the Layout's styles as well as its clipping bounds.
* **Absolute:** An Absolute Layout positions itself within an artboard or parent Layout container. It can have 2 or more of it’s edges pinned to the container.
* **Relative:** A Relative Layout has it’s position defined by the parent artboard or Layout. Changing the flex properties on the parent will determine the child layout behaviour.
## Scale types
A layout’s width and height can make use of 3 different scale behaviours:
* **Fixed:** A fixed width or height for the Layout. The defined value can be either a point or percentage value. Use the unit toggle within the fields to toggle between value types.
* **Hug:** The width and/or height of the Layout shrinks to fit its children. For example, you may want a Layout to hug a text object; resizing itself based on the length of the text inside.
* **Fill:** The width and/or height of the Layout expands to fill the available space within the parent Layout or artboard. The fill option switches the width/height fields to be represented in `fr` (fill ratio) units and reveals a base size field. The fill ratio values make it possible to control the fill behaviour between a number of children with the fill scale behaviour. For example, you may want the children to fill the available space equally, or perhaps have one child scale at a greater factor than the rest.
Options to set the scale type are below the width and height fields in the inspector.
## Clip
The clip toggle hides any child elements within the layout that extend beyond the bounds of the Layout.
## Position (absolute Layouts only)
Absolute Layouts provide additional options to set their position within the artboard or parent Layout. The position is defined by at least 2 pinned edges — one horizontal and one vertical, however additional edges can also be enabled.
Set the desired edges to pin by selecting the markers within the inspector graphic, or via the fields below. You can hold `shift` while selecting a marker to add a second edge along the same axis. The distance values from a chosen edge can be provided as points or percentages by selecting the chosen unit type within the field.
## Padding and margin
## Alignment
Select the desired point on the inspector widget to align content within a layout container.
## Justify
Click on the current alignment position to expand the content to fill the available space. Selecting the one of the active tiles again collapses the content back down.
## Gap
Spacing between content (gaps) can be set both horizontally and vertically, and as either points or percentages of the container width/height.
## Left-to-right/right-to-left