Rows with HStack
Place views side by side horizontally.
Rows with HStack is a free SwiftUI Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Going Horizontal
Sometimes views belong side by side, not stacked down. For that you reach for the horizontal sibling of VStack. ➡️
Meet HStack
An HStack arranges its children horizontally, left to right. It is perfect for rows like an icon next to a label.
Your First HStack
Put views inside the HStack braces and they line up across the screen in the order you wrote them.
HStack {
Text("Left")
Text("Right")
}Left to Right Order
In an HStack the first child sits on the leading edge and later children follow toward the trailing edge. Code order is left-to-right order.
Icon Plus Label
A classic HStack pairs an Image with a Text so an icon and its caption stay on one line, like a row in a settings screen.
HStack {
Image(systemName: "bell")
Text("Alerts")
}Centered Vertically
By default an HStack aligns its children to the vertical center, so a tall image and short text line up neatly along their middles.
HStack Hugs Its Content
Just like VStack, an HStack shrinks to fit its children rather than filling the whole width. It takes only the space it needs.
Combining HStack and VStack
Nest an HStack inside a VStack to build a card: a title row on top and a detail row below. Mixing both directions builds real layouts.
VStack {
Text("Title")
HStack {
Text("A")
Text("B")
}
}HStack Is a View
An HStack is a view too, so modifiers like padding or background apply to the entire row at once, treating it as a single block.
Mixed Content Rows
An HStack happily holds different view types together, like a number, a label, and a button all sharing one horizontal line.
HStack {
Text("42")
Button("Add") { }
}When to Reach for HStack
Use an HStack whenever items read left to right: a label and value, a toolbar of buttons, or an avatar beside a name.
Quick Check
Let's confirm how HStack lays things out.
Recap: Horizontal Rows
Great progress! An HStack lines views up left to right, centers them vertically, and pairs beautifully with VStack to build cards and rows. 🙌
Frequently asked questions
Is the “Rows with HStack” lesson free?
Yes — the full text of “Rows with HStack” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Rows with HStack”?
Place views side by side horizontally. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Rows with HStack” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.