不同的网站服务于不同的功能，布局也不尽相同。好的布局应当能让用户迅速聚焦与导航，并引导用户形成一致的认知，以降低同一产品不同页面间的认知成本。
基础布局
基础布局仅包含网站的页头与页底。
- 页头包括网站的品牌标识、导航、以及与整个网站和个人相关的一些操作或信息；
- 页底包括网站的版权信息、必要的声明以及附加的链接等。
侧边导航布局
对大多数的网站而言，位于页头的顶部导航已经足够满足其功能与信息的需求了。但对于功能较为复杂的、信息结构较深的网站而言，其一级导航数量较多，若用仍然用水平导航会导致部分一级导航被折叠，使得加深了信息层级。因此，对于这一类网站应用而言，可以使用侧边导航布局。相对于基础布局，侧边导航布局增加一个侧边导航区域。
卡片布局
卡片布局适用于对数据集合的展示，每张卡片包含了某一项目的关键信息，这些关键信息可以是图片、文本、操作按钮等，卡片以网格视图展示，帮助用户迅速浏览数据信息。卡片布局通常是响应式的，视窗宽度越宽，每一行容纳的卡片数量越多。
居中布局
页面有时内容较少，可能仅包含一张表单或者一篇文章，居中布局就是用于解决这种情况的。居中布局仍然遵循 12 栏栅格布局。有效内容部分可占 8/12 或 6/12。
