# SwiftUI: stacks and groups

> Learn how to lay out multiple views in SwiftUI using HStack, VStack, and ZStack to align them on each axis, plus Group to bundle views together.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-09-15 | Topics: [Swift](https://flaviocopes.com/tags/swift/) | Canonical: https://flaviocopes.com/swiftui-stacks/

No [SwiftUI](https://flaviocopes.com/swiftui-introduction/) app, beside an Hello World, has just a view.

When you want to add more than one view, you need to add them to a stack.

There are 3 kinds of stacks: 

- `HStack` aligns items on the X axis
- `VStack` aligns items on the Y axis
- `ZStack` aligns items on the Z axis

Let's go back to the Hello World app:

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}
```

To add a second `Text` view we can't do this:
 
```swift
struct ContentView: View {
    var body: some View {
        Text("Hello World")
        Text("Hello again!")
    }
}
```

but we have to **embed those views into a stack**.

Let's try with `VStack`:

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
            Text("Hello again!")
        }
    }
}
```

![iPhone simulator showing VStack with Hello World and Hello again! text views arranged vertically](https://flaviocopes.com/images/swiftui-stacks/Screen_Shot_2021-09-13_at_10.22.05.png)

See? The views are aligned vertically, one after the other.

Here's `HStack`:

![iPhone simulator showing HStack with Hello World Hello again! text views arranged horizontally](https://flaviocopes.com/images/swiftui-stacks/Screen_Shot_2021-09-13_at_10.22.41.png)

And here's `ZStack`, which puts items one in front of the other, and in this case generates a mess:

![iPhone simulator showing ZStack with overlapping Hello World text views creating messy display](https://flaviocopes.com/images/swiftui-stacks/Screen_Shot_2021-09-13_at_10.23.02.png)

`ZStack` is useful, for example, to put a background image and some text over it. That's the simplest use case you can think of.

In `SwiftUI` we organize all our UI using those 3 stacks. 

We also use `Group`, a view that, similarly to stacks, can be used to group together multiple views, but contrary to stack views, it does not affect layout.

```swift
VStack {
    Group {
        Text("Hello World")
        Text("Hello again!")
    }
}
```

> One use case that might come handy for groups, beside applying modifiers to child views as we'll see next, is that views can only have 10 children. So you can use `Group` to group together up to 10 views into 1

`Group` and the stack views are views too, and so they have modifiers.

Sometimes modifiers affect the view they are applied to, like in this case:

```swift
Text("Hello World") 
.font(.largeTitle)
```

Sometimes however they are used to apply the same property to multiple views at the same time.

Like this:

```swift
VStack {
    Text("Hello World")
    Text("Hello again!")
}
.font(.largeTitle)
```

![iPhone simulator showing VStack with both text views displaying in large title font size](https://flaviocopes.com/images/swiftui-stacks/Screen_Shot_2021-09-13_at_12.42.07.png)

See? By applying the `font()` modifier to the `VStack`, the `.largeTitle` font was applied to both `Text` views.

This is valid for modifiers that we call **environment modifiers**. Not every modifier can work this way, but some do, like in the above example.