How to Use VStack and HStack in SwiftUI

Use VStack and HStack in SwiftUI when views need simple vertical or horizontal layout structure. These are the foundational building blocks for forms, cards, headers, pricing rows, and app screens.

What you’ll build or solve

You’ll learn how to use VStack and HStack in SwiftUI for spacing, alignment, and nested layouts. You’ll also know when ZStack is the better fit.

When this approach works best

This approach is the right choice when content should be arranged in clear rows and columns.

Common real-world scenarios include:

• Card layouts
• Form rows
• Profile headers
• Pricing sections
• Dashboard widgets

This is a bad idea when views should overlap on top of each other.

Prerequisites

You only need:

• Basic SwiftUI views
• Text and image elements
• Familiarity with modifiers

Step-by-step instructions

Step 1: Use VStack for vertical layouts

VStack places views top to bottom.

import SwiftUI

struct ProfileView: View {
    var body: some View {
        VStack {
            Text("Srdan")
            Text("SEO & PPC Manager")
        }
    }
}

This is perfect for stacked content sections.

Step 2: Use HStack for horizontal rows

HStack arranges views left to right.

struct PriceRow: View {
    var body: some View {
        HStack {
            Text("Pro Plan")
            Spacer()
            Text("$19")
        }
    }
}

This works well for rows and menus.

Step 3: Add spacing and alignment

Both stacks support layout customization.

VStack(alignment: .leading, spacing: 12) {
    Text("Title")
    Text("Subtitle")
}

This improves readability and rhythm.

Step 4: Nest stacks for complex layouts

Most real UIs combine both.

HStack {
    Image(systemName: "person.circle")
    VStack(alignment: .leading) {
        Text("Alex")
        Text("Premium member")
    }
}

This is the most common SwiftUI layout pattern.

What to look for:

• VStack stacks vertically
• HStack arranges horizontally
• spacing controls rhythm
• alignment controls edges
• Nest stacks for real layouts

Examples you can copy

Vertical card

VStack {
    Text("Title")
    Text("Body")
}

Horizontal price row

HStack {
    Text("Plan")
    Spacer()
    Text("$9")
}

Nested profile row

HStack {
    Image(systemName: "person")
    VStack { ... }
}

Common mistakes and how to fix them

Mistake 1: Using the wrong stack direction

What the reader might do:

Use VStack for a row layout.

Why it breaks: the UI stacks vertically instead of horizontally.

Corrected approach:

Switch to HStack.

Mistake 2: Forgetting Spacer()

What the reader might do:

Expect row items to spread automatically.

Why it breaks: views stay tightly grouped.

Corrected approach:

Use Spacer().

Mistake 3: Over-nesting stacks

What the reader might do:

Wrap every small element in another stack.

Why it breaks: the layout becomes harder to read.

Corrected approach:

Flatten the hierarchy where possible.

Troubleshooting

If the direction is wrong, switch between VStack and HStack.

If row spacing feels cramped, add spacing.

If alignment feels off, set alignment.

If layouts overlap, consider ZStack instead.

Quick recap

• Use VStack for vertical layouts
• Use HStack for horizontal rows
• Customize spacing and alignment
• Use Spacer() for flexible gaps
• Nest stacks for real-world layouts