Layout — Frame and padding

These modifiers control where a component sits and how much space it claims. frame sets fixed or flexible dimensions; containerRelativeFrame sizes a component relative to its nearest scrollable container; padding adds space around it. offset shifts the visual position without affecting layout, zIndex controls stacking order inside a ZStack, and layoutPriority decides which sibling wins when space is tight.

frame

Sets the size of a component using fixed dimensions or flexible constraints.

.frame(props: { width?: number; height?: number; alignment?: Alignment })
.frame(props: { minWidth?: number; idealWidth?: number; maxWidth?: number; minHeight?: number; idealHeight?: number; maxHeight?: number; alignment?: Alignment })

object

required

Fixed frame.

Show props

number

The exact width in points.

number

The exact height in points.

Alignment

default:"center"

How to align the content within the frame if it is smaller than the frame. See Alignment.

object

required

Flexible frame.

Show props

number

The minimum width in points.

number

The ideal width in points, used when the parent offers flexibility.

number

The maximum width in points. Use Infinity to expand to fill available width.

number

The minimum height in points.

number

The ideal height in points.

number

The maximum height in points. Use Infinity to expand to fill available height.

Alignment

default:"center"

How to align the content within the frame. See Alignment.

The fixed frame overload sets exact dimensions. The flexible frame overload sets constraints — the component sizes itself within those bounds based on its content and the parent’s size proposal. Use Infinity for maxWidth or maxHeight to make the component expand to fill all available space. Fixed size

Color("blue")
    .frame({ width: 100, height: 100 })

Fixed width only

Text("Constrained width")
    .frame({ width: 200 })

Full-width with leading alignment

Text("Left aligned")
    .frame({ maxWidth: Infinity, alignment: "leading" })

Minimum and maximum constraints

Text("Flexible")
    .frame({ minWidth: 100, maxWidth: 300 })

Full-screen background

Color("blue")
    .frame({ maxWidth: Infinity, maxHeight: Infinity })

Fixed size with alignment

Text("Top-left")
    .frame({ width: 200, height: 200, alignment: "topLeading" })

containerRelativeFrame

Sizes a component relative to its nearest container.

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

Axis

required

Fill container overload: the axis along which the component fills the container. See Axis.

object

required

Grid subdivision overload.

Show props

Axis

The axis along which to subdivide. See Axis.

Alignment

How to align the component within its cell. See Alignment.

number

required

The number of columns (horizontal) or rows (vertical) to divide the container into.

number

default:"1"

How many columns or rows this component spans.

number

required

The spacing between grid cells in points.

object

required

Fractional sizing overload.

Show props

Axis

The axis along which to apply fractional sizing. See Axis.

Alignment

How to align the component within its frame. See Alignment.

number

required

The fraction of the container’s size to use (0.0 to 1.0).

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. 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
            })
        )
    ])
])

padding

Adds padding around a component.

.padding(length: number): Component
.padding(edges?: EdgeSet, length?: number): Component

number

The padding amount in points. When called with a single number, applies equal padding on all edges.

EdgeSet

Which edges to apply padding to. See EdgeSet. When omitted, padding is applied to all edges.

Uniform padding

Text("Hello")
    .padding(16)

Edge-specific padding

Text("Horizontal only")
    .padding("horizontal", 20)

Vertical padding

Text("Vertical spacing")
    .padding("vertical", 12)

Single edge

Text("Bottom only")
    .padding("bottom", 24)

Combined with background Padding is applied before the background, so the background extends to cover the padded area.

Text("Padded card")
    .padding(16)
    .background(Color("blue"))
    .cornerRadius(12)

offset

Offsets the component’s visual position without affecting layout.

.offset(offset: { x?: number; y?: number }): Component

object

required

The offset values in points.

Show properties

number

default:"0"

Horizontal offset. Positive moves right, negative moves left.

number

default:"0"

Vertical offset. Positive moves down, negative moves up.

The offset is purely visual. The component’s original layout space is preserved — surrounding components aren’t affected by the offset. For layout-affecting position changes, use padding instead. Shifting a component

Circle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("blue"))
    .offset({ x: 20, y: -10 })

Overlapping badge

ZStack([
    Image({ systemName: "bell" })
        .font("title"),
    Circle()
        .frame({ width: 12, height: 12 })
        .foregroundStyle(Color("red"))
        .offset({ x: 10, y: -10 })
])

Vertical offset only

Text("Shifted down")
    .offset({ y: 20 })

zIndex

Controls stacking order in a ZStack.

.zIndex(order: number): Component

number

required

The stacking priority. Higher values render on top of lower values. The default is 0.

zIndex only affects rendering order within the same parent container. Without it, components in a ZStack render in order: first child at the bottom, last child on top. Negative values are valid and place the component behind siblings with the default zIndex(0). Bring a component to front

ZStack([
    Circle()
        .frame({ width: 100, height: 100 })
        .foregroundStyle(Color("blue")),
    Circle()
        .frame({ width: 100, height: 100 })
        .foregroundStyle(Color("red"))
        .offset({ x: 30, y: 30 })
        .zIndex(1),
])

Layered cards

ZStack([
    RoundedRectangle(12)
        .frame({ width: 200, height: 120 })
        .foregroundStyle(Color("gray"))
        .offset({ y: -10 })
        .zIndex(0),
    RoundedRectangle(12)
        .frame({ width: 220, height: 130 })
        .foregroundStyle(Color("blue"))
        .zIndex(1),
    RoundedRectangle(12)
        .frame({ width: 200, height: 120 })
        .foregroundStyle(Color("gray"))
        .offset({ y: 10 })
        .zIndex(0),
])

Dynamic z-ordering

const body = () => {
    const [selected, setSelected] = useState(0)
    return ZStack(
        items.map((item, index) =>
            Text(item.name)
                .padding(16)
                .background(Color(item.color))
                .cornerRadius(8)
                .offset({ x: index * 20, y: index * 20 })
                .zIndex(index === selected ? 10 : 0)
                .onTapGesture(() => setSelected(index))
        )
    )
}

layoutPriority

Sets the layout priority for space distribution among siblings.

.layoutPriority(priority: number): Component

number

required

The layout priority. Higher values receive preference for available space. Default is 0.

Layout priority only matters when sibling components compete for limited space within a parent container (e.g., HStack, VStack). All components default to a priority of 0. A component with priority 1 is offered its ideal size before components with priority 0. Negative values are valid and cause the component to shrink before siblings. Prioritizing one text over another When two texts compete for space in an HStack, the one with higher layout priority gets its full width before the other.

HStack([
    Text("This text should get more space")
        .layoutPriority(1),
    Text("Secondary text")
])

Preventing truncation

HStack([
    Text("Important label")
        .layoutPriority(1)
        .lineLimit(1),
    Spacer(),
    Text("$99.99")
        .layoutPriority(1)
        .lineLimit(1)
])

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Layout — Frame and padding

frame

containerRelativeFrame

padding

offset

zIndex

layoutPriority

See also

​frame

​containerRelativeFrame

​padding

​offset

​zIndex

​layoutPriority

​See also

frame

containerRelativeFrame

padding

offset

zIndex

layoutPriority

See also