White Belt ~15 min
Layout Kata
Build a responsive, grid-based layout
Why This Kata
Layout systems fail silently – they look fine until a real device with a real screen width breaks them. This Kata builds a layout from the math outward: grid first, spacing second, breakpoints last.
Responsive DesignAn approach where layout and content adapt fluidly to different screen sizes, using a single codebase across phone, tablet, and desktop.
Atomic DesignA methodology for building UI systems by decomposing interfaces into five levels – atoms, molecules, organisms, templates, and pages – for consistent, scalable design.
0 / 3 steps complete
0/36 interactions
45s active time left
px
Desktop (1280px)
Common desktop content width, fits comfortably on 1440px+ displays with margin to spare.
Best for: Standard web apps, dashboards, and marketing pages.
cols
16121824
px
px
Grid preview
Column
Gutter / Margin
Column width: 79.3px. Content area: 952px.
Column width
79.3px
6.2% of container
Content area
952px
74.4% useful
Total gutters
264px
11 × 24px
Total margins
64px
2 × 32px