BitWithBite
UI/UX Worksheet
🎨 Spacing, Grids & 8px
SCORE___ / 20
NameClassDate
After this worksheet you can
Explain the 8px systemIdentify valid spacing valuesExplain column gridsApply spacing consistently📚 Quick Recap
🎯 What you'll practice: The 8px base unit, valid spacing multiples, and column grids.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1An 8px spacing system means all spacing is:
2Which value is a valid spacing choice in an 8px system?
3Column grids primarily provide:
48 is chosen as a base unit partly because:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
58px multiples match common screen across devices.
6The Design system convention popularized the 8px grid.
7List 3 valid spacing values in an 8px system between 8 and 40.
8Why does a shared spacing system reduce design inconsistency across a team?
9Explain how column grids help with responsive layouts.
🚀 Section C · Challenge ● CHALLENGE 5
10A teammate proposes 10px, 15px, and 22px spacing values. Explain why this breaks the 8px system and suggest corrected values.
💭 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-B 4-B | 5 = densities 6 = Material 7 = e.g. 8px, 16px, 32px (any 8-multiples in range) 8 = Because everyone uses the same predefined values instead of picking arbitrary numbers, spacing stays visually consistent everywhere 9 = Column grids define consistent breakpoints and column counts so layouts reflow predictably at different screen widths | 10 = 10/15/22 aren't multiples of 8, so they'd create subtly uneven spacing; corrected values would be 8px, 16px, and 24px.