# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/snap-to-place/row.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.