> For the complete documentation index, see [llms.txt](https://ios-course.cornellappdev.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ios-course.cornellappdev.com/resources/textbook/swiftui/layouts.md).

# Layouts

When we create apps, we don’t just care about creating our views — we also want to lay them out. In SwiftUI, there are three main ways to lay out our views:

1. `HStack`
2. `VStack`
3. `ZStack`

### HStack

An `HStack` is a view that arranges its views in a **horizontal** line. For example, to lay out the text “Cornell” and “AppDev” horizontal, we can use the following code:

```swift
HStack {
    Text("Cornell")
    Text("AppDev")
}
```

<figure><img src="/files/65czR9FkbXPLcmhB8KFT" alt="" width="237"><figcaption><p>HStack</p></figcaption></figure>

### VStack

A `VStack` is a view that arranges its views in a *vertical* line. For example, to lay out the text “Cornell” and “AppDev” vertically, we can use the following code:

```swift
VStack {
    Text("Cornell")
    Text("AppDev")
}
```

<figure><img src="/files/BDe8u3neel832aztHIGA" alt="" width="144"><figcaption><p>VStack</p></figcaption></figure>

### ZStack

A `ZStack` is a view that *overlays* its subviews, aligning them in both axes. For example, to place the text “AppDev” above a background color of red, we can use the following code:

```swift
ZStack {
    Color.red
    Text("AppDev")
}
```

<figure><img src="/files/AeZUk2u4YSKpLIVtEk9h" alt="" width="214"><figcaption><p>ZStack</p></figcaption></figure>

### Spacers

A `Spacer` is a flexible view that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack. For example, to place the text “Cornell” as far away from “AppDev” in an `HStack`, we can use the following code:

```swift
HStack {
    Text("Cornell")
    Spacer()
    Text("AppDev")
}
```

<figure><img src="/files/zNjRshYtP3GcfiSvAgJM" alt="" width="375"><figcaption><p>Spacer in an HStack</p></figcaption></figure>

### Other Views

Of course, there are other types of views we can use to lay out our views. I recommend reading the Apple Documentation for each one if you’re interested.

* LazyHStack
* LazyVStack
* List
* ScrollView
* LazyHGrid
* LazyVGrid
* Form
* Divider