Skip to main content
.containerRelativeFrame(axes: Axis)
.containerRelativeFrame(props: { axes?: Axis; alignment?: Alignment; count: number; span?: number; spacing: number })
.containerRelativeFrame(props: { axes?: Axis; alignment?: Alignment; fraction: number })

​
Overload 1: Fill container

​
axes
Axis
required
The axis along which the component fills the container. See Axis.

​
Overload 2: Grid subdivision

​
props
object
required

​
Overload 3: Fractional sizing

​
props
object
required

​
Support

​
Usage

​
Fill the container horizontally

Color("blue")
    .containerRelativeFrame("horizontal")

​
Grid layout — 3 columns with spacing

Image(url)
    .containerRelativeFrame({
        axes: "horizontal",
        count: 3,
        span: 1,
        spacing: 8
    })

​
Span multiple columns

Image(url)
    .containerRelativeFrame({
        axes: "horizontal",
        count: 3,
        span: 2,
        spacing: 8
    })

​
Fractional sizing — 80% of container width

Text("Wide content")
    .containerRelativeFrame({
        axes: "horizontal",
        fraction: 0.8
    })

​
Horizontal scroll with fixed-width cards

ScrollView({ axes: "horizontal" }, [
    LazyHStack({ spacing: 16 }, [
        ForEach(items, (item) =>
            VStack([
                Image(item.image)
                    .scaledToFill(),
                Text(item.title)
                    .font("headline")
            ])
            .containerRelativeFrame({
                axes: "horizontal",
                count: 3,
                span: 2,
                spacing: 16
            })
        )
    ])
])

​
Notes

The nearest container is the closest ancestor ScrollView, List, or NavigationStack. The modifier sizes the component relative to that container’s visible area, not the full scrollable content. The grid subdivision form calculates the cell width as: (containerWidth - (count - 1) * spacing) / count * span + (span - 1) * spacing.

​
See Also