<!--
{
  "availability" : [
    "iOS: 17.0.0 -",
    "iPadOS: 17.0.0 -",
    "macCatalyst: 17.0.0 -",
    "macOS: 14.0.0 -",
    "tvOS: 17.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 10.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/View/containerRelativeFrame(_:alignment:_:)",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Method",
  "symbol" : {
    "kind" : "Instance Method",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI4ViewPAAE22containerRelativeFrame_9alignment_QrAA4AxisO3SetV_AA9AlignmentV14CoreFoundation7CGFloatVAN_AGtctF"
  },
  "title" : "containerRelativeFrame(_:alignment:_:)"
}
-->

# containerRelativeFrame(_:alignment:_:)

Positions this view within an invisible frame with a size relative
to the nearest container.

```
nonisolated func containerRelativeFrame(_ axes: Axis.Set, alignment: Alignment = .center, _ length: @escaping (CGFloat, Axis) -> CGFloat) -> some View
```

## Discussion

Use the [`containerRelativeFrame(_:alignment:)`](/documentation/SwiftUI/View/containerRelativeFrame(_:alignment:)) modifier
to specify a size for a view’s width, height, or both that
is dependent on the size of the nearest container. Different
things can represent a “container” including:

- The window presenting a view on iPadOS or macOS, or the
  screen of a device on iOS.
- A column of a NavigationSplitView
- A NavigationStack
- A tab of a TabView
- A scrollable view like ScrollView or List

The size provided to this modifier is the size of a container like
the ones listed above subtracting any safe area insets that might
be applied to that container.

The following example will have each purple rectangle occupy the full
size of the screen on iOS:

```
ScrollView(.horizontal) {
    LazyHStack(spacing: 0.0) {
        ForEach(items) { item in
            Rectangle()
                .fill(.purple)
                .containerRelativeFrame([.horizontal, .vertical])
        }
    }
}
```

Use the [`containerRelativeFrame(_:count:span:spacing:alignment:)`](/documentation/SwiftUI/View/containerRelativeFrame(_:count:span:spacing:alignment:))
modifier to size a view such that multiple views will be
visible in the container. When using this modifier, the count
refers to the total number of rows or columns that the length of
the container size in a particular axis should be divided into.
The span refers to the number of rows or columns that the modified
view should actually occupy. Thus the size of the element can
be described like so:

```
let availableWidth = (containerWidth - (spacing * (count - 1)))
let columnWidth = (availableWidth / count)
let itemWidth = (columnWidth * span) + ((span - 1) * spacing)
```

The following example only uses the nearest container size in the
horizontal axis, allowing the vertical axis to be determined using
the [`aspectRatio(_:contentMode:)`](/documentation/SwiftUI/View/aspectRatio(_:contentMode:)) modifier.

```
ScrollView(.horizontal) {
    LazyHStack(spacing: 10.0) {
        ForEach(items) { item in
            Rectangle()
                .fill(.purple)
                .aspectRatio(3.0 / 2.0, contentMode: .fit)
                .containerRelativeFrame(
                    .horizontal, count: 4, span: 3, spacing: 10.0)
        }
    }
}
.safeAreaPadding(.horizontal, 20.0)
```

Use this modifier to apply your own custom logic to adjust the size
of the nearest container for your view. The following example will
result in the container frame’s width being divided by 3 and using
that value as the width of the purple rectangle.

```
Rectangle()
    .fill(.purple)
    .aspectRatio(1.0, contentMode: .fill)
    .containerRelativeFrame(
        .horizontal, alignment: .topLeading
    ) { length, axis in
        if axis == .vertical {
            return length / 3.0
        } else {
            return length / 5.0
        }
    }
```

---

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)