Bringing SwiftUI Stacks to the Web2 min read
With the introduction of SwiftUI came a refined API to control UI layout. In this post, we'll look at how we can transfer these paradigms to the web.
If you’d like the history on Stack layouts and why they are useful, please check out my other post Easier Layouts with Stacks.
Today we’ll be using React and Emotion, but the same principles should apply to any library that supports components or templates.
Responsible for arranging views horizontally, we can use a simple Grid with
autoFlow set to
column. This will make sure as children are added, they default to creating new columns.
Similar to HStack we can set
row. This will make sure as children are added, they default to creating new rows.
This primitive is responsible for overlaying children and aligning them on both axes. We use
placeItems to align both axes of our children and set each immediate child to
gridArea: 1/1. This will place children on top of one another, similar to position absolute, but preserving the layout.
And that’s it! Now we have layout primitives similar to SwiftUI 🎉