<!--
{
  "documentType" : "article",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/Building-Layouts-with-Stack-Views",
  "metadataVersion" : "0.1.0",
  "role" : "article",
  "title" : "Building layouts with stack views"
}
-->

# Building layouts with stack views

Compose complex layouts from primitive container views.

## Overview

Individually, [`HStack`](/documentation/SwiftUI/HStack), [`VStack`](/documentation/SwiftUI/VStack), and [`ZStack`](/documentation/SwiftUI/ZStack) are
simple views. [`HStack`](/documentation/SwiftUI/HStack) positions views in a horizontal line,
[`VStack`](/documentation/SwiftUI/VStack) positions them in a vertical line, and [`ZStack`](/documentation/SwiftUI/ZStack)
overlays views on top of one another.

![A diagram showing the three different stack views; Horizontal, vertical, and depth. Each stack contains a square and a circle shape stacked together either side-by-side horizontally or vertically, or layered one on top of the other.](images/com.apple.SwiftUI/Building-Layouts-with-Stack-Views-1@2x.png)

When you initialize them with default parameters, stack views center align their
content and insert a small amount of spacing between each contained view. But,
when you combine and customize stacks with view modifiers, [`Spacer`](/documentation/SwiftUI/Spacer),
and [`Divider`](/documentation/SwiftUI/Divider) views, you can create highly flexible and complex
layouts.

### Plan your layout hierarchy

Think about a layout in terms of how you might create it using the various types
of stack views as you start to translate your design into code. Break down
complex designs into smaller, simpler pieces you can build with stack views.

For example, you might build this profile view using three stack views:

![A diagram showing how a generic user profile layout might utilize stack views. The diagram shows the rendered layout next to an exploded, 3D illustration of the view hierarchy showing four layers of views stacked on top of each other. The lowest level of the hierarchy is a ZStack; above that is an Image view, then an HStack, and finally a VStack and Spacer view at the highest level.](images/com.apple.SwiftUI/Building-Layouts-with-Stack-Views-2@2x.png)

A [`ZStack`](/documentation/SwiftUI/ZStack) contains an [`Image`](/documentation/SwiftUI/Image) view that displays a profile
picture with a semi-transparent [`HStack`](/documentation/SwiftUI/HStack) overlaid on top. The
[`HStack`](/documentation/SwiftUI/HStack) contains a [`VStack`](/documentation/SwiftUI/VStack) with a pair of [`Text`](/documentation/SwiftUI/Text)
views inside it, and a [`Spacer`](/documentation/SwiftUI/Spacer) view pushes the [`VStack`](/documentation/SwiftUI/VStack) to the
leading side.

To create this stack view:

```swift
struct ProfileView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            Image("ProfilePicture")
                .resizable()
                .aspectRatio(contentMode: .fit)
            HStack {
                VStack(alignment: .leading) {
                    Text("Rachael Chiseck")
                        .font(.headline)
                    Text("Chief Executive Officer")
                        .font(.subheadline)
                }
                Spacer()
            }
            .padding()
            .foregroundColor(.primary)
            .background(Color.primary
                            .colorInvert()
                            .opacity(0.75))
        }
    }
}
```

### Position views with alignment and spacer views

Align any contained views inside a stack view by using a combination of the
`alignment` property, [`Spacer`](/documentation/SwiftUI/Spacer), and [`Divider`](/documentation/SwiftUI/Divider) views.

In the previous example layout, the [`VStack`](/documentation/SwiftUI/VStack) that contains the two
[`Text`](/documentation/SwiftUI/Text) views uses the [`leading`](/documentation/SwiftUI/HorizontalAlignment/leading)
alignment:

![A diagram showing two views being aligned in three different ways in a vertical stack view. Leading, where both views are aligned to the leading edge of the stack. Centered, where both views are centered in the stack. Finally trailing, where both views are aligned with the trailing edge](images/com.apple.SwiftUI/Building-Layouts-with-Stack-Views-3@2x.png)

The `alignment` property doesn’t position the [`VStack`](/documentation/SwiftUI/VStack) inside its
container; instead, it positions the views inside the [`VStack`](/documentation/SwiftUI/VStack).

The `alignment` property of a [`VStack`](/documentation/SwiftUI/VStack) only applies to the horizontal
alignment of the contained controls using [`HorizontalAlignment`](/documentation/SwiftUI/HorizontalAlignment).
Similarly, the `alignment` property for an [`HStack`](/documentation/SwiftUI/HStack) only controls the
vertical alignment using [`VerticalAlignment`](/documentation/SwiftUI/VerticalAlignment). Finally, you can align
views inside a [`ZStack`](/documentation/SwiftUI/ZStack) along both axes with [`Alignment`](/documentation/SwiftUI/Alignment).

Use [`Spacer`](/documentation/SwiftUI/Spacer) views to align views along the primary axis of an
[`HStack`](/documentation/SwiftUI/HStack) or [`VStack`](/documentation/SwiftUI/VStack). Spacers expand to fill any available
space and push content apart from other views or the edges of the stack.

![A diagram showing the use of spacer views in three vertical stack views. The first stack shows a spacer view pushing another view to the top of its container. The second stack shows a spacer view pushing two views apart, ending with the views aligned to the top and bottom of their container. a spacer view pushing another view to the bottom of its container.](images/com.apple.SwiftUI/Building-Layouts-with-Stack-Views-4@2x.png)

[`Divider`](/documentation/SwiftUI/Divider) views also add space in between a stack’s subviews, but only
insert enough space to draw a line across the stack’s minor axis. They don’t
expand to fill available space.

### Create adaptive layouts instead of explicit layouts

Wherever possible, define structure and hierarchy rather than explicitly
positioning view frames. Instead of using explicit heights and widths for views,
let them expand to fill available space. Adaptive layouts that you build adapt
more easily to different device sizes and platforms.

It is possible to create this article’s example layout with two stack views
rather than three, by manipulating the [`Text`](/documentation/SwiftUI/Text) view frames explicitly.
While the output might look the same, the code to implement it is more brittle,
and might not scale as well across devices of different size classes.

You may need to make adjustments to a layout that uses explicit adjustments by
using view modifiers such as [`frame(width:height:alignment:)`](/documentation/SwiftUI/View/frame(width:height:alignment:)) or
[`position(x:y:)`](/documentation/SwiftUI/View/position(x:y:)), but only consider this when you can’t achieve
your desired layout in an adaptive, flexible way.
For more information on making fine adjustments to view layout,
see [Making fine adjustments to a view’s position](/documentation/SwiftUI/Making-Fine-Adjustments-to-a-View-s-Position).

### Add depth in alternative ways

In some situations it may make sense to add depth to your layout by using the
[`overlay(_:alignment:)`](/documentation/SwiftUI/View/overlay(_:alignment:)) and
[`background(_:alignment:)`](/documentation/SwiftUI/View/background(_:alignment:)) view modifiers instead of a
[`ZStack`](/documentation/SwiftUI/ZStack). The background view modifier places another view behind
the view you’re modifying, and overlay places a view on top of it.

Choose between a stack-based approach and the view modifier approach based on
how you want to determine the size of the final layout. If your layout has one
dominant view that defines the size of the layout, use the
[`overlay(_:alignment:)`](/documentation/SwiftUI/View/overlay(_:alignment:)) or
[`background(_:alignment:)`](/documentation/SwiftUI/View/background(_:alignment:)) view modifier on that view. If you
want the final view size to come from an aggregation of all the contained views,
use a [`ZStack`](/documentation/SwiftUI/ZStack).

For example, this code overlays a `ProfileDetail` view on top of the
[`Image`](/documentation/SwiftUI/Image) view:

```swift
struct ProfileViewWithOverlay: View {
    var body: some View {
        VStack {
            Image("ProfilePicture")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .overlay(ProfileDetail(), alignment: .bottom)
        }
    }
}

struct ProfileDetail: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Rachael Chiseck")
                    .font(.headline)
                Text("Chief Executive Officer")
                    .font(.subheadline)
            }
            Spacer()
        }
        .padding()
        .foregroundColor(.primary)
        .background(Color.primary
                        .colorInvert()
                        .opacity(0.75))
    }
}
```

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)