# Columns and rows layout

**URL:** <https://community.thunkable.com/t/columns-and-rows-layout/1404350>\
**Category:** Teachers' Lounge\
**Created:** [July 20, 2021, 4:19am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350 "2021-07-20T04:19:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cstielery](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@cstielery](https://community.thunkable.com/u/cstielery)\
**Post date:** [July 20, 2021, 4:19am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/1 "2021-07-20T04:19:10Z")

</div>

I’m working with some students to design an app in the free version of Thunkable. We are trying to use the “column” and “row” functionality to get better layout control. However, we can’t find the “column” and “row” components. Are we missing something or are they not available in the free version?

Kind Regards

Colleen.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [July 20, 2021, 4:49am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/2 "2021-07-20T04:49:08Z")

</div>

They are available in the free version (almost everything is) but only in the older snap-to-place interface. You’re probably using the newer drag-and-drop interface which has a `group` component instead of `row` and `column` components. I haven’t found the `group` component to be all that useful but someone else could prove me wrong.

When you create a new project, there is a checkbox to “try it out.” If left unchecked, the snap-to-place interface is used.

---

<div class="post-metadata">

**Author:** ![zaccroningn3fvz](https://avatars.discourse-cdn.com/v4/letter/z/46a35a/32.png) [@zaccroningn3fvz](https://community.thunkable.com/u/zaccroningn3fvz)\
**Post date:** [July 20, 2021, 7:21am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/3 "2021-07-20T07:21:23Z")

</div>

you must be using the drag and drop and you can only use it in the version where u can place stuff

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [July 20, 2021, 8:08am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/4 "2021-07-20T08:08:37Z")

</div>

Just going to chime in here to add that you don’t even really _need_ rows and cols with the latest version since the Drag and Drop editor allows you to position the components anywhere you want on the screen (components can even be layered on top of one another!)

What sort of apps are you building with your students?

---

<div class="post-metadata">

**Author:** ![cstielery](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@cstielery](https://community.thunkable.com/u/cstielery)\
**Post date:** [July 20, 2021, 11:24am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/5 "2021-07-20T11:24:48Z")

</div>

Thank you everyone for your help. The students are creating a menu home page. They have a series of buttons that take them to other screens. What they are finding is that they create a button and put a label underneath it. The label position changes depending on whether it is displayed on a phone (and it differs between phones) or in the web preview. I thought the problem was that she was using absolute position rather than relative positioning and I thought using rows and cols was the way to achieve that. However, if you have another solution, I’d be keen to hear it.

If grouping is the way to do it, should she group the label and the button?

Thanks again. I’m really impressed with such fast responses for a newb! 🙂

Kind Regards

Colleen.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [July 20, 2021, 11:30am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/6 "2021-07-20T11:30:10Z")

</div>

> [@cstielery](#):
>
> The students are creating a menu home page.

Here’a a legacy project that shows how to do this with only two screens (I must update it to Drag and Drop)

> [@Create multiple "Categories" in your app with just 1 Screen](https://community.thunkable.com/t/create-multiple-categories-in-your-app-with-just-1-screen/916950):
>
> In this tutorial we will look at how to dynamically add content to a screen in Thunkable. Take a look at the template here: [Thunkable](https://x.thunkable.com/projectPage/5f848c54bd53ef6e45c4bf89) Intro This app looks like it might have 6 screens, but in reality it has only 2. There is 1 screen for the menu and then 1 “template” screen that we dynamically update depending on what button is pressed. Design In this app all the settings are defined in the blocks. This is really useful if you want to resize several compo…

* * *

> [@cstielery](#):
>
> However, if you have another solution, I’d be keen to hear it.

If you use the latest Drag and Drop editor it has smart guides that allow you to left, centre or right align components directly on the screen like this:

 ![smart_guides](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/b/3bba99d0501e0691ffa3758d3ab3dc2ec90949dd.png)

---

<div class="post-metadata">

**Author:** ![cstielery](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@cstielery](https://community.thunkable.com/u/cstielery)\
**Post date:** [July 20, 2021, 11:49am UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/7 "2021-07-20T11:49:19Z")

</div>

Thank you again. I think the red alignment bars may do what we need. I’ll let the girls know and see how they go with it. Greatly appreciated!

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:19pm UTC](https://community.thunkable.com/t/columns-and-rows-layout/1404350/8 "2024-11-08T13:19:37Z")

</div>


