> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/snap-to-place/column.md).

# Column

A column is a vertical container that allows you to stack components.

## Video Tutorial

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAonNrLekbSzc3rVf_d%2F-LAoqLxb5ZdeI_4C3Y3A%2FThunkable%20Documentation%20Exhibits%20\(65\).png?alt=media\&token=42f1efb3-6ab4-420f-957c-67c3a6385580)

## Set the Size of a Column

For more information on sizing in your app, please see our [introduction here​](/snap-to-place/intro-to-sizing.md)

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

## Space the elements vertically

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LhmEQlvEo04g_HXhJKK%2F-LhmFa4vBLTPpIszFiSI%2Fimage.png?alt=media\&token=3c14bab2-777c-4a0e-b4ff-e81f4e57a3d6)

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

## Space the elements horizontally

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAonNrLekbSzc3rVf_d%2F-LAorAslrN5RU_fFhHRQ%2FThunkable%20Documentation%20Exhibits%20\(66\).png?alt=media\&token=63a5c57b-4767-41d2-967d-24a4bf49c08d)

## 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

This determines how to resize the image when the frame doesn't match the raw image dimensions.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhm2T0tSbe8cP26ff3v%2F-Lhm6DdY5UmF4Mtvzv2S%2Fimage.png?alt=media\&token=ffd0fb60-a97e-4351-b8ac-7177aac982e7)

* 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

## Enable scrolling

| Property   | Description                                                                                                                                                                                                                 |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Scrollable | Default (`false`). Indicates whether the column is scrollable. For scrollable to work, you must also set your screen height to `fit contents`  and the components in your column must have heights set in `absolute` pixels |

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