# Columns Tutorial

**URL:** <https://forums.realmacsoftware.com/t/columns-tutorial/54734>\
**Category:** Elements\
**Created:** [February 26, 2026, 7:13am UTC](https://forums.realmacsoftware.com/t/columns-tutorial/54734 "2026-02-26T07:13:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [February 26, 2026, 7:13am UTC](https://forums.realmacsoftware.com/t/columns-tutorial/54734/1 "2026-02-26T07:13:31Z")

</div>

Is there a good tutorial on sizing columns? I’d like to be able to create column layouts like a 3 column layout set at 40/20/40 and a 4 column layout set at 20/20/20/40. Or, is that not a thing in Elements and is there a different way to do that?

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [February 26, 2026, 8:36am UTC](https://forums.realmacsoftware.com/t/columns-tutorial/54734/2 "2026-02-26T08:36:25Z")

</div>

use a Grid component and set Column & Rows to 12 Columns. Then put in a Container in the Grid for each of the columns. In the Container component under Flexbox and Grid, set it to Grid Item and then set the column number like 5/2/5, as long as they add up to 12.

If you want exacts 40/20/40, set the Grid to 10, and then the Containers to 4/2/4.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/f/af533b877007bf7a4bfb3330c60a269ae3ea047a.png)

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/b/7bd6c0bda551e4deb7049a449f93a2d7c4462db2.png)

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/8/683082b8ed0a6a070ab1c6af378534081f973a2f.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [February 26, 2026, 8:39am UTC](https://forums.realmacsoftware.com/t/columns-tutorial/54734/3 "2026-02-26T08:39:11Z")

</div>

Nice reply @ercross 👍

@dropgates This following videos should also help 🙂

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/5/d54fadde54fb22baeb5693ceb3208c7c9f7f3119.jpeg "Two Coloumn Layout using Flex or Grid") ](https://www.youtube.com/watch?v=e4aFe6uteO0)

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/6/c61ad84584e006b17403e69e6bac0bca5e252ab5.jpeg "Let's Build: Steve's 3-Column Layout") ](https://www.youtube.com/watch?v=kJprijDUKmY)

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [February 26, 2026, 1:54pm UTC](https://forums.realmacsoftware.com/t/columns-tutorial/54734/4 "2026-02-26T13:54:46Z")

</div>

Thank you @ercross and @dan , I appreciate the help.