# Row

## Video Tutorial

{% embed url="<https://youtu.be/4v7TNY1Ewko>" %}

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6DqRgt7GTXFtDrQg%2Frow-%E2%9C%95-fig-1.png?generation=1524497185061818\&alt=media)

## **Set the Size of a Row**

**For more information on sizing in your app, please see our introduction here​**<br>

| **Property** | **Description**                                                                                                                                                                                                                                                                                                       |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Height       | <ul><li>Fill container - The row fills the entire screen vertically  </li><li>Fit contents - The row’s height changes to fit the components it contains</li><li>Relative size - The row fills the specified percentage of the screen</li><li>Absolute size -  Sizes the row to a specified number of pixels</li></ul> |
| Width        | <ul><li>Fill container - The row fills the entire screen horizontally  </li><li>Fit contents -  The row’s width changes to fit the components it contains</li><li>Relative size - The row fills the specified percentage of the screen</li><li>Absolute - Sizes the row to a specified number of pixels</li></ul>     |

## Space the Elements Horizontally

The `Horizontal Alignment` property allows you to space elements in a Row horizontally

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LhqqqfAJo1zAqu1cMmC%2F-LhqqsBatCf19rFLgzyv%2Fimage.png?alt=media\&token=6f3650be-82aa-474e-a589-405631aa3356)

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAonNrLekbSzc3rVf_d%2F-LAoq2q-43qhpZ5XAczT%2FThunkable%20Documentation%20Exhibits%20\(64\).png?alt=media\&token=8bad0383-e81c-4574-b959-105686c62281)

## Space the Elements Vertically

The `Vertical Alignment` property allows you to space elements in a Row vertically

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6ClEA1XUmupg0fMs%2Fspacing-%E2%9C%95-fig-2.png?generation=1524497178898825\&alt=media)

## Add a Background Color or Picture

| Property           | Description                                                                                     |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| Background Color   | Default (`none`). Select any color using the color picker, RGBA or HEX value                    |
| Background Picture | You can upload a background image to your app or reference an image url e.g.`beaver-yellow.png` |
|                    |                                                                                                 |

**Background Picture Resize Mode**&#x20;

* Cover: Fills the entire screen without changing the height and width ratio of the image<br>
* Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image<br>
* Stretch: The image's height will change to fill the screen length-wise<br>
* Repeat: Repeat the image to cover the screen. The image's height and width ratio

  &#x20;will not change  <br>
* Center: Positions the image in the middle of the frame

{% embed url="<https://youtu.be/XYlOkaDg9Ho>" %}