BitWithBite
UI/UX Worksheet
🎨 Auto Layout
SCORE___ / 20
NameClassDate
After this worksheet you can
Explain direction & spacingExplain paddingDistinguish Hug/Fill/FixedCompare Auto Layout to Flexbox📚 Quick Recap
🎯 What you'll practice: Auto Layout's direction, spacing, padding, and resizing rules.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Auto Layout direction can be:
2A frame set to "Hug" will:
3A frame set to "Fill" will:
4Auto Layout is most comparable to:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The space between child elements in Auto Layout is called /gap.
6Space between a frame's edge and its contents is called .
7Why is Auto Layout better than manually positioning every element?
8When would you use "Fixed" instead of "Hug" or "Fill"?
9Give a real UI example where "Fill" resizing is the correct choice.
🚀 Section C · Challenge ● CHALLENGE 5
10Design a card list using Auto Layout: describe the direction, spacing, padding, and resizing settings you would use for the list and each card.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-A 4-B | 5 = spacing 6 = padding 7 = Auto Layout automatically resizes and repositions elements as content changes, saving manual rework 8 = When an element must always stay a specific size regardless of content, e.g. a fixed-size icon 9 = e.g. a search input bar that should expand to fill the remaining width of its container | 10 = Answers vary — e.g. vertical direction, 16px spacing between cards, 24px padding around the list, list set to Hug height and Fill width, each card set to Fill width and Hug height.