Windows 8为用户带来了灵活、响应迅速的界面，适用于商务应用、生产力工具、照片、游戏和音乐。对于开发者来说，新的HTML和JavaScript工具以及Windows 8应用的框架提供了同样敏捷的编码环境。通过结合标准轻量级工具和Win8及WinRT平台的全部功能，可以使用大多数Web开发者熟悉的技术，为手机、平板电脑、笔记本电脑和桌面电脑创建快速、流畅的应用。这些应用与使用C#和XAML构建的Win8应用完全兼容，易于部署，并已准备好进入Windows商店，在那里可以立即接触到全球数百万用户。本文基于《Windows 8 Metro页面网格》一书的第3章，作者向展示了如何使用Metro数据网格。
当准备部署应用程序时，会发现拥有良好的Metro设计和Metro页面网格基础知识将使提交过程更加顺利。本文基于《JavaScript和HTML5forWindows 8》一书的第3章，作者向展示了如何使用网格。
作为设计辅助工具，微软为提供了一个“轮廓”或基本应用程序布局。其下是Windows 8网格系统。这个网格可以帮助确保应用程序与其他Windows 8应用程序和谐共存，并在切换应用程序时避免产生突兀的效果。网格还足够灵活，允许独特性和灵活性。
网格被划分为20像素的单元。每个20像素的单元可以被划分为5×5像素的子单元，因此每个单元有16个子单元。图1显示了屏幕左上角的网格。图像被放大以显示像素、子单元和单元。
页面标题的基线应距离顶部5个单元（100像素）。页面标题的左边距为120像素或6个单元。应使用的字体为42点Segoe UI Light。请记住，网格上元素的放置是灵活的，但6单元的左边距是应该避免的区域，因为这个区域也保留用于用户滑动返回到上一个应用程序或网页。因此，干扰这个区域可能会影响内置于Metro框架中的导航。同时，请记住右边距——用户在访问魅力栏进行搜索、共享、设置等操作时会频繁使用这个区域。
包含页面内容的区域应距离顶部7个单元，或140像素。左边距再次为6个单元，或120像素。底部边距是灵活的。如果内容水平滚动，则不应超过6.5个单元（130像素），或不少于2.5个单元（50像素）。如果内容垂直滚动，顶部和左边距保持不变。显然，如果内容垂直滚动，则没有底部边距。如果内容不滚动，希望在右侧留出舒适的边距。
间距是子单元发挥作用的地方。网格内项目之间的间距和分隔根据内容类型而异。像图片和用户磁贴这样的项目与它们的伴随文本之间有清晰的2个子单元，或10像素的间距。列表在列之间有清晰的2个单元的间距。硬边项目在列之间有2个子单元的间距。
以下是一个完全独特的应用程序布局示例，但请注意，它仍然基于网格系统。
排版和页面布局通常属于设计师的领域，而不是开发者的领域，对于许多开发者来说，这可能会感到有些陌生。早期的微软开发工具侧重于快速开发，并包括了适合创建简单“战舰灰色”界面的简单UI表单和控件——简单的应用程序，背景为灰色，布局最小化。Silverlight和WPF开发允许开发具有更复杂用户界面的应用程序，但现在随着Metro应用程序开发，一个精心规划的UI变得更加必要。事实上，有许多UI标准需要了解，并且这些标准将在应用程序被接受进入Windows商店之前被仔细检查。
对于开发者来说，好消息是这个网格系统内置于Visual Studio中，Metro控件是专门为网格系统设计的。所以，请使用模板。