In this lesson, we will take a closer look at how we can use Row and Stack blocks to achieve our design needs.
Using the Group block is one of the cornerstones of mastering the block editor.
When you select a Group block, you have the variations of the Group block.
The standard Group block, which gathers blocks in a container, the Row block, which arranges blocks horizontally,
the Stack block, which arranges blocks vertically, and the Grid block, which arranges blocks in a grid.
To start, let's look at some common examples of where the Row block will come in handy.
Firstly, I want to show you how you can create the top section of my example with the help of a Row block.
So if we scroll down, we will see it's currently empty, so let's go ahead and type in forward slash row.
And then add a Row block.
And then firstly, we will add a heading and name it the 'Green House.'
Then I will press enter and of course the text will now be on the right of the heading.
So let's go and copy the text from our example, 'Make your home a sanctuary,'
and then paste.
Now we will open up our List View, select the Heading and the Paragraph block,
and then group them together using my block toolbar.
Now that the text is below my heading, I would like to remove the space between the blocks.
So I'll open up my sidebar settings, make my way to Styles, and below Dimensions,
I will ensure that the block spacing is set to zero.
Now that the heading and the text are closer to each other, I think it looks great.
So I will close my sidebar settings and then select the Row block again in my List View.
Click on the Inserter and add a Buttons block.
Let's say 'Explore' and open our sidebar settings and select the outline style.
Next, I would like to move the Buttons block to the right, and this is where the power of the Row block really comes to play.
So let's select the Row block in our sidebar settings and make our way to justification in our block toolbar,
and then select Space between items.
And once we select that, we will notice that the Buttons block pushes to the right.
Lastly, I would like to align the Buttons block to the bottom.
So let's select change vertical alignment in our block toolbar and then click on align bottom.
So as you can see, there are many design possibilities using the spacing and alignment options of the Row block.
Secondly, the Row block works very effectively for headers.
So to add a header, let's make our way to Appearance and then click on the Editor.
And this will take you to your Site Editor, where you can manage templates and add headers and footers.
Make your way to patterns, click on the plus icon next to patterns, and then select Create template part.
We'll go ahead and select header and then name it appropriately, and then click on Create.
Now we can build our header by first adding a Row block.
Next, I will add my site logo, which I've already added to my media library.
And then enlarge it.
Once I've done that, I will press Enter.
And next to my site logo, I'm going to add my Site Tagline block.
'Better beans, better coffee.' Then I'll open up my List View, select the Site Logo and the Site Tagline block,
and then wrap them in a Stack block.
Now I would like to remove the space between the two blocks, so I'll make sure I've selected my Stack block,
open up Styles in my sidebar settings, and ensure that the block spacing is zero.
And then in my block toolbar, I will also change the justification to center.
Next, I'll select my Row block, the container block, go to Styles and change the background color to salmon.
Then I'll click on the Inserter and add my Navigation block.
Now we will see a list of all the pages that I've added to my site, but I'll click on the three vertical dots and select a navigation menu that I've already created.
Then I will ensure that I select my Row block again, and then below layout in our sidebar settings, I will click on Space between items,
to ensure that the navigation menu moves to the right.
And now our header is done.
Let's end off by taking a closer look at the Stack block.
In this example, we have three columns and as you will notice, there's less text or content in the left column.
I would like the background color as well as the Buttons block to push down and align with the columns in the middle and the right.
Let's see what I've done. I've stacked all the content within a column together in a Stack block,
and secondly, I stacked the heading as well as the paragraph together in a Stack block.
But I've left the Buttons block by itself.
Next, when we select the main Stack block and open up our styles settings,
you will notice I've changed the background color of the Stack block and not the column.
And I've added some padding around the main Stack block.
The next crucial step is to change the minimum height of the stack block to 100%.
And as we did that, you would have noticed that the background color expanded and aligns with the other columns.
Next, we are also going to make sure that the Buttons block on the left aligns with the other Buttons blocks.
So, select change vertical alignment in your block toolbar and then select Space between.
And now you will see that the buttons block pushed down to align with the other columns.
These blocks may appear basic on the surface, but as you have seen, you can do a lot with them
once you start applying additional settings like space between and minimum height.