Grid

With its rigorous hierarchies and geometry, the grid orients us. It tells us what’s important and what can wait. It is the structure behind the elegant relationships between type, icons, controls, and images.

The grid is relational: the smallest pixel size determines the stroke, the size of the icon, the typography size, leading, kerning, tile sizes. It’s also a freer, more open space, with room for organic shapes. Rather than being an overly rationalized or rigid setting, the grid becomes the stable ground under a newly intimate and fully humanistic visual syntax.

The four-pixel grid allows us to scale our design elements consistently across all display sizes.

Grid examples showing various icons on the grid
Grid examples showing components on the grid
Grid examples showing various icons on the grid
Grid examples showing components on the grid
Grid examples showing various sized objects on the grid
Grid examples showing various sized objects on the grid

Layout guidelines for UWP apps

To learn about layout in UWP apps, see the Layout section of the Microsoft Dev Center.