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.
First you will want to create a google Spreadsheet with the first 2 rows as column titles, like so:
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
Next we are going to set the alignment of our Gsheet Box.
This will make the inner content flow side-by-side instead of being stacked on top of one another.
This will cause the inner content to separate evenly.
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.
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
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:
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
Finally we can replace our dummy text with the actual codes to grab the data from our Google Sheet, like so:
That’s it, now we will have the following result:
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
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.