HIG Playground Home GitHub 🇺🇸 EN
HIG Lab → HIG Playground → Collections

Collections

Explore iOS Collection View (LazyVGrid/LazyHGrid) layouts interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41
●●●● WiFi 🔋
Collections
Grid Items
⚠️ HIG Violation: Improper grid layout
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Use consistent item sizes within a grid
  • Provide appropriate spacing between items
  • Ensure minimum touch target size (44pt)
  • Use lazy loading for large collections

✗ Don't Do This

  • Mix wildly different item sizes without purpose
  • Make tap targets too small
  • Use too many columns on narrow screens
  • Load all items at once for large datasets

👆 See the bad pattern in the iPhone preview above

Compact
Regular
Relaxed
Square
Rounded
Circle
Show Labels
SwiftUI Code
HIG Lab — Apple Human Interface Guidelines Interactive Playground