前面我们讲的列网格和模块网格，都建立在"等分"的基础之上。列网格把页面切成等宽的栏，模块网格在等宽的栏上再加等高的行，每个栏和每个模块的尺寸都是一样的。但有些页面的内容天然不适合等分。

比如一个产品的落地页，头部是一张全宽的品牌大图，中间是两栏功能介绍，底部是三栏的用户评价，再往下是一个单栏的行动号召区域。每个区块的宽度不同、高度不同、内部结构也不同。如果硬套 12 栏的等分网格，头部的全宽图还好处理，但中间两栏和底部三栏的切换就需要在同一套网格上做不同的列数安排，行动号召区域又要回到全宽，整个页面的布局跳来跳去，网格的"等分"反而变成了限制。

一个新闻首页也是类似的问题。头条新闻需要占据页面上最大的面积来吸引注意力，次要新闻占中等面积，普通新闻只需要小卡片。如果用列网格，所有新闻卡片都对齐到等宽的栏上，头条和普通新闻的面积差异只能靠横跨不同的栏数来实现。但栏数是整数，能切出来的面积比例就那么几档，12 栏网格里，一块区域只能占 1 栏、2 栏、3 栏……没法精确地表达出"这条新闻比那条重要三倍"这种程度差异。

层级网格为这类场景提供了一种不同的思路。它不从等分出发，而是从内容的重要性出发，根据信息的优先级来分配区域的大小和位置。

1. 层级网格和前几种网格的区别

列网格和模块网格的工作方式是"先定结构，再填内容"。设计师需要先决定栏数、间距、边距、行高，再把网格搭好，最后把内容放进网格的格子里。内容必须适应网格的尺寸，如果内容和格子不匹配，要么调整内容，要么接受不完美的适配。

层级网格的工作方式正好相反，是"先看内容，再定结构"。设计师需要先分析页面上有哪些内容区块、每个区块的重要性如何、区块之间的关系是什么，然后根据这些分析来划分页面区域。重要的内容占大面积，次要的内容占小面积，区域的大小和位置直接反映信息的优先级。

在层级网格中，不同区域的大小是不相等的，而且这种不相等是有意为之的。在列网格中，所有栏等宽是网格的基本特征，栏与栏之间的平等关系是网格秩序的一部分。在层级网格中，区域之间的不平等才是秩序的核心，大小差异本身就在传达信息。

但"不等分"不等于"没有规则"。层级网格仍然需要规则来维持页面的秩序，只是这些规则和列网格的规则不同。列网格的规则是"所有元素对齐到等宽的栏线上"，层级网格的规则是"区域的大小反映信息的优先级，区域之间的对齐关系和间距保持一致"。

2. 层级网格的布局逻辑

层级网格的核心逻辑是：区域的面积大小和信息的重要性成正比。最重要的内容占最大的区域，次要的内容占较小的区域，辅助性的内容占最小的区域。用户打开页面时，视线最先落在面积最大的区域上（和大小对比那篇讲的逻辑一致），从那里开始阅读，再逐步移向较小的区域。

这个逻辑要求区域之间的大小差异必须足够明显。如果两个区域的面积接近，用户就无法从布局中感知到优先级的差异，不知道该先看哪个。这和大小对比中的感知阈值是同一个道理。在层级网格中，相邻优先级的区域之间，面积比例至少要达到 1.5 倍以上，用户才能在扫视时清楚地感知到"这个区域比那个区域更重要"。

举一个例子。一个新闻首页有三个优先级内容：头条（最重要）、次要新闻（中等重要）、普通新闻列表（最不重要）。如果头条区域占页面可视区域的 50%，次要新闻占 30%，普通新闻列表占 20%，用户的视线会自然按照"头条→次要新闻→普通新闻"的顺序扫视，因为面积差异足够大，优先级一目了然。但如果三个区域各占 33%，用户面对三个大小相等的区域就不知道该先看哪个，层级网格就失去了意义。