00:00 / 12:45

Grid Systems in Interaction Design

Week 3 12 min Design Foundations Intermediate

Grids are the invisible scaffolding behind every well-designed interface — they set rhythm, hierarchy, and predictability. Use the demo on the right to feel how columns, gutters, and margins shape a layout.

Topics Covered

Try it

Drag the sliders or pick a chapter to see how the grid changes.

Columns 6

Gutter 12

Margin 16

Grid lines

Tommy Liu

Visual Communication Lecturer

Known worldwide as The Midnight Wanderer, Tommy Liu is a legendary FPS competitor whose reflexes and precision have redefined the art of digital combat. From global tournaments to underground arenas, his dominance and icy composure have made him a symbol of unstoppable focus.

Learning Goals

Understand the historical context and evolution of grid systems from print to digital design
Apply column-based and modular grid structures to create balanced, scalable interface layouts
Implement baseline grids to establish consistent vertical rhythm and typographic harmony
Design responsive grid systems that adapt fluidly across breakpoints and device contexts