Understanding container layouts is really the secret weapon for UI design because it will help you deliver a nicely laid out design that is easy to navigate.

Let's take this group testimonials section as an example. Currently, the container layout is set to column. Fantastic! I can see that we have three testimonials, top to bottom.

Column equals stacked content and row is aligned on the same y axis next to each other.

Now, what is row gap? Well, row gap applies equal spacing between the child elements and we set the row gap on the parent. You can see it's currently outlined; these are the children.

So let's go back to the parent. Let's reduce the row gap to 16 and you can see that the gap between the top element and middle element as well as the gap between the middle element and bottom element has equal spacing. Nice and neat! So as we add more of these all of the spacing is automated for us by using gap spacing. That's fantastic!

Let's set it back to 32. Let's change the container layout to row and you can see what's happened. Now the content is distributed across the row and just like in the container layout for column, we also have access to gap spacing. So if I had to change the column gap these spaces here in this central location to 16, we can see that these spaces have shrunk down and there's more space for these text elements.

Now, I'm going to just delete this element in the center and let's see what happens. Okay, these group containers have filled all remaining space, but has kept the 16 pixels of column gap.

Now let's talk about container alignment. In order to demonstrate this, I'm just going to set the width to the content and maybe just make these a standard size, 300 by 300. Okay, so I've clicked on Group testimonials-grid, the parent and I currently have this option here called space between. So that pushes the children to the very edges of our parent. If I choose container alignment on the left, you can see how they're now sitting next to each other but we still have our column gap of 16.

Let me change this column gap to 24 so that's to increase the space. I can also move this content to the center. I can push it to the right. There's another option called space around which I don't use very often, but an option I do use all the time is space between, pushing content to the side—very popular for designing navigation bars with the logo on the left and the buttons on the right.