Layout fundamentals

Overview

Use layout containers to arrange the elements of your user interface. Stacks and grids update and adjust the positions of the subviews they contain in response to changes in content or interface dimensions. You can nest layout containers inside other layout containers to any depth to achieve complex layout effects.

[Image]

To fine-tune the position, alignment, and other elements of a layout that you build with layout container views, see Layout adjustments. To define custom layout containers, see Custom layout. For design guidance, see Layout in the Human Interface Guidelines.

Topics

Choosing a layout

• Picking container views for your content

Statically arranging views in one dimension

• Building layouts with stack views
• HStack
• VStack

Dynamically arranging views in one dimension

• Grouping data with lazy stack views
• Creating performant scrollable stacks
• LazyHStack
• LazyVStack
• PinnedScrollableViews

Statically arranging views in two dimensions

• Grid
• GridRow
• gridCellColumns(_:)
• gridCellAnchor(_:)
• gridCellUnsizedAxes(_:)
• gridColumnAlignment(_:)

Dynamically arranging views in two dimensions

• LazyHGrid
• LazyVGrid
• GridItem

Layering views

• Adding a background to your view
• ZStack
• zIndex(_:)
• background(alignment:content:)
• background(_:ignoresSafeAreaEdges:)
• background(ignoresSafeAreaEdges:)
• background(_:in:fillStyle:)
• background(in:fillStyle:)
• overlay(alignment:content:)
• overlay(_:ignoresSafeAreaEdges:)
• overlay(_:in:fillStyle:)
• backgroundMaterial
• containerBackground(_:for:)
• containerBackground(for:alignment:content:)
• ContainerBackgroundPlacement

Automatically choosing the layout that fits

• ViewThatFits

Separators

• Spacer
• Divider

See Also

View layout

• Layout adjustments
• Custom layout
• Lists
• Tables
• View groupings
• Scroll views