---
title: Layout fundamentals
framework: swiftui
role: collectionGroup
role_heading: API Collection
path: swiftui/layout-fundamentals
---

# Layout fundamentals

Arrange views inside built-in layout containers like stacks and grids.

## Overview

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.

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](swiftui/picking-container-views-for-your-content.md)

### Statically arranging views in one dimension

- [Building layouts with stack views](swiftui/building-layouts-with-stack-views.md)
- [HStack](swiftui/hstack.md)
- [VStack](swiftui/vstack.md)

### Dynamically arranging views in one dimension

- [Grouping data with lazy stack views](swiftui/grouping-data-with-lazy-stack-views.md)
- [Creating performant scrollable stacks](swiftui/creating-performant-scrollable-stacks.md)
- [LazyHStack](swiftui/lazyhstack.md)
- [LazyVStack](swiftui/lazyvstack.md)
- [PinnedScrollableViews](swiftui/pinnedscrollableviews.md)

### Statically arranging views in two dimensions

- [Grid](swiftui/grid.md)
- [GridRow](swiftui/gridrow.md)
- [gridCellColumns(_:)](swiftui/view/gridcellcolumns(_:).md)
- [gridCellAnchor(_:)](swiftui/view/gridcellanchor(_:).md)
- [gridCellUnsizedAxes(_:)](swiftui/view/gridcellunsizedaxes(_:).md)
- [gridColumnAlignment(_:)](swiftui/view/gridcolumnalignment(_:).md)

### Dynamically arranging views in two dimensions

- [LazyHGrid](swiftui/lazyhgrid.md)
- [LazyVGrid](swiftui/lazyvgrid.md)
- [GridItem](swiftui/griditem.md)

### Layering views

- [Adding a background to your view](swiftui/adding-a-background-to-your-view.md)
- [ZStack](swiftui/zstack.md)
- [zIndex(_:)](swiftui/view/zindex(_:).md)
- [background(alignment:content:)](swiftui/view/background(alignment:content:).md)
- [background(_:ignoresSafeAreaEdges:)](swiftui/view/background(_:ignoressafeareaedges:).md)
- [background(ignoresSafeAreaEdges:)](swiftui/view/background(ignoressafeareaedges:).md)
- [background(_:in:fillStyle:)](swiftui/view/background(_:in:fillstyle:).md)
- [background(in:fillStyle:)](swiftui/view/background(in:fillstyle:).md)
- [overlay(alignment:content:)](swiftui/view/overlay(alignment:content:).md)
- [overlay(_:ignoresSafeAreaEdges:)](swiftui/view/overlay(_:ignoressafeareaedges:).md)
- [overlay(_:in:fillStyle:)](swiftui/view/overlay(_:in:fillstyle:).md)
- [backgroundMaterial](swiftui/environmentvalues/backgroundmaterial.md)
- [containerBackground(_:for:)](swiftui/view/containerbackground(_:for:).md)
- [containerBackground(for:alignment:content:)](swiftui/view/containerbackground(for:alignment:content:).md)
- [ContainerBackgroundPlacement](swiftui/containerbackgroundplacement.md)

### Automatically choosing the layout that fits

- [ViewThatFits](swiftui/viewthatfits.md)

### Separators

- [Spacer](swiftui/spacer.md)
- [Divider](swiftui/divider.md)

## See Also

### View layout

- [Layout adjustments](swiftui/layout-adjustments.md)
- [Custom layout](swiftui/custom-layout.md)
- [Lists](swiftui/lists.md)
- [Tables](swiftui/tables.md)
- [View groupings](swiftui/view-groupings.md)
- [Scroll views](swiftui/scroll-views.md)