Gsheet – Basic Text Alignment Tutorial

Hi everyone,

We had a great customer come in from a customer wondering how to create a specific layout using the Gsheet stack, so we thought we would make a tutorial for everyone.

The user wanted to learn how to create a basic layout like this one:

(With Site names on the left and Prices one the right)

Here, we will show you step by step how to use Gsheet stacks to create such a layout.

Step #1 – Create your Google Spreadsheet

First you will want to create a google Spreadsheet with the first 2 rows as column titles, like so:

Step #2 – Connect your sheet and add a Gsheet Box inside

Next after connecting our sheet, we will add a Gsheet box inside of the Gsheet stack for the basic wrapper of our template. Remember that Gsheet will automatically repeat this box for each item in our sheet.

If you need to learn more about connecting your sheet check out the full Gsheet Tutorial

Step #3 – Set up the alignment of the Gsheet Box

Next we are going to set the alignment of our Gsheet Box.

First we will change the content flow to “Columns”

This will make the inner content flow side-by-side instead of being stacked on top of one another.

Second we will set the content alignment to “Split”

This will cause the inner content to separate evenly.

Step #4 – Add in 2 Gsheet Text Stacks

Now we will add 2 Gsheet Text Stacks inside of our box. One for the Site name and one for the Price.

For now we are not grabbing the values, we are just using placeholder text while we setup our layout.

Step #5 – Confusion with Gsheet Text

Now here you might think that this will give us the result that we are expecting, but actually it does not.

This is because Gsheet Text can has a Text Fill option which can be set to

  • Shrink
  • Grow

By default it is set to “Grow” meaning that the text will fill the space of the parent container, causing the other price stack to wrap onto the next line, giving us a result like this one:

Step 6 – How do I change this?

Solving this is actually quite simple. All you need to do is set the Text Fill option of the Gsheet Text stacks to “Shrink” instead of “Grow”, like so:

Now the text will no longer fill the parent, but shrink to fit the content inside, giving us the result that we want.

Remember that we set our Gsheet Box content alignment to “SPLIT” which causes both text stacks to split evenly across the container

Step #7 – Replacing our placeholder text with value codes

Finally we can replace our dummy text with the actual codes to grab the data from our Google Sheet, like so:

{{row.site}}

{{row.revenue}}

Step #8 – Finished

That’s it, now we will have the following result:

Step #9 – Review

I know it can seem a bit complicated at first, but it’s just a matter of learning how the Gsheet Box alignment works, and how the Gsheet Text fill works. We really wanted to create stacks that would allow for a wide variety of different layouts, which is why we setup Gsheet stacks with “Shrink” and “Grow” options.

Let’s do a quick review of the setup:

  • Create your sheet

  • Add a Gsheet Box for the template wrapper

  • Set your Gsheet Box content flow to "Column (Side by Side)

  • Set your Gsheet Box content alignment to “SPLIT”

  • Add 2 Gsheet Text Stacks

  • Make sure each Gsheet Text stack is set to “Shrink”

  • Replace the dummy text with the proper data codes

  • Done!

Step #10 – Thanks!

I hope this tutorial comes in handy to those who are learning to create different layouts with Gsheet. We hope to make more and more tutorials as time goes by, if anyone ever has questions.

:slight_smile:

9 Likes

Thanks for taking the time to explain how this feature works. Great stuff.

Rob

Thank you very much for this tutorial :slightly_smiling_face:

Thanks for sharing this tutorial — I look forward to seeing more…

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.