How to Use Alignments in SwiftUI — Container Expansion using Alignments

This is the third part in the ‘SwiftUI Layout System’ series and the fourth part in the subseries about ‘How to Use Alignments in SwiftUI’. To keep things simple we haven’t caused the tallest element of the container, in this case the Stack, to be repositioned in the past parts, but we will change that in this part and see what happens when we do.

The SwiftUI Layout System

• How to Use the SwiftUI Layout System
• How to Use Stacks in SwiftUI
• How to Use Alignments in SwiftUI
  – The Basics
  – The Alignment Process
  – Custom Alignments
  – Container Expansion using Alignments
  – Z-Stacks Alignment

(More to come …)

Container Expansion using Alignments

Let’s recap a basic rule we learned from the alignment process. When a new child is considered with an alignment guide that is less than the alignment guide of the container, the new child is vertically positioned by the difference.

Up until now, if you read all the previous parts, all alignment guides were within the bounds of the tallest child. So let’s spice things up and position the children in such a way that this does not happen.