[]
它将页面划分为行和列的网格，可以快速通过格子设置元素的位置和大小。网格的行列是固定的宽度和布局。整个页面的宽度和高度为所有列的列宽和所有行的高度。运行之后，页面将在浏览器页面中水平方向居中显示页面。如下图。
活字格所有内容的呈现都需要基于网格，弹性布局，表单，自由布局也需要放置于网格单元格之后才能正常使用。当然弹性布局，表单，自由布局内部都可以嵌套其他的布局容器。只是最外一层的容器需要放置到格子区域，并且受格子区域的行高或者列宽功能的影响。
所以此章节讲解的是格子布局的行高，列宽的设置，需要仔细学习了解此功能，因为在活字格中复杂的页面，通常会有嵌套使用的场景，需要了解每个布局的策略，才能快速灵活搭建页面。
通常web网页的内容都是需要充满浏览器页面的宽度和高度，如下示例图。
这个页面的整体可以划分为左右两部分，右侧部分的宽度是固定宽度，左侧部分则充满浏览器页面的宽度。
我们以下面4块区域，分别代表上图中的4大部分。
运行之后，在浏览器中显示的结果如下，4个部分的宽度以及高度都与设计器中每个色块的宽度和高度一致，水平居中显示，垂直方向上是靠上显示。
实现期望的结果是希望在水平方向， 黄色和橙色的色块能充满浏览器页面，在垂直方向上，橙色和蓝色的色块在高度方向上充满浏览器页面。此时需要使用网格的范围模式
范围模式设置在行高或者列宽上，设置行高或者列宽，选择范围模式，表示浏览器页面剩余空间的分配比率。
选择黄色色块区域中的任何一列，比如 L列，列宽，设置为范围模式，占比为1，表示在浏览器中，水平方向，显示所有列之后，如果还有剩余的空间，此列占比为1。
下图中，只有这一列设置了范围模式的占比，所以运行之后，此列的列宽将被拉宽，占据水平方向剩余的空间。
运行之后，浏览器中的结果如下图，黄色和橙色的色块区域被拉宽，实际上主要是第L列的列宽被拉宽，宽度是水平方向浏览器剩余的宽度。
同样的操作，橙色色块区域的行中，选择任一行，设置行高为范围模式，表示，在垂直方向上，浏览器显示所有行的行高后，如果有剩余空间，此行的行高被拉高，占据剩余的高度。
运行之后的结果，橙色和蓝色的高度被拉高，实际上是第19行的行高，被拉高，高度是垂直方向上浏览器剩余的高度。
到此，使用行和列的范围模式，就可以将示例图中，页面的布局从框架上划分成了4个完整的部分。后面就是每个部分填充具体的内容。后面章节详细介绍如何填充内容。
自适应模式，设置在行高或者列宽上，表示这行/列的高度或者宽度是受这一行或者列中的内容自动变化。最常见的场景是图文列表的高度，根据图文列表中的内容自动变化。
如下图场景，图文列表中的项目是不固定的，当项目多时，图文列表的高度自动增长，根据图文列表中的项目个数，自适应适当的高度，浏览器出现滚动条，滚动显示图文列表的内容。
上面的场景，在设计器设计时，如下图部分，使用图文列表，配置数据以及设计图文列表中的模板。
运行之后，结果如下，图文列表区域内的项目只显示了部分项目，且图文列表有滚动条，需要滚动图文列表的滚动条查看后面的项目。
如何做到示例场景中，图文列表平铺显示所有项目，且出现浏览器的滚动条，以此滚动查看图文列表剩下的所有项目，这就需要使用自适应模式。
在设计器，图文列表所在的任意一行，设置行高为自适应模式，表示这一行的行高会根据内容自动变化。
运行之后，结果和示例场景一样，图文列表所有项目在垂直方向上，当项目多的时候，会根据图文列表中的所有项目，自动撑高行高，以显示所有项目，并且出现浏览器的滚动条，滚动查看图文列表的项目。
注意：在设计器中，将R列设置成了范围模式，意味着运行时，R列的宽度自动占据浏览器剩余宽度，以达到充满浏览器宽度的效果。
接着上面的场景，在设计器将第14行的行高，设置成了自适应，运行时，此行的行高将会根据内容自动撑高，以显示所有图文列表的项目。那么当图文列表项目少，或者没有一个项目时，表现是什么样的呢?
回到设计器，修改图文列表的查询条件（id 等于 -1），没有符合此条件的项目，所以运行时，图文列表将没有任何项目。
为了让图文列表更好的呈现，在设计器，给图文列表设置了绿色背景。
运行之后查看效果，能看到，当图文列表没有任何项目时，仍然占据了一块区域，为什么呢？设计器不是设置了行高为自适应吗？
原因是，只设置了第14行的行高为自适应，当图文列表没有内容时，第14行确实不显示了，怎么证明第14行不显示了呢？
回到设计器中，在第14行的A14单元格，设置一个背景色，红色背景，运行之后查看结果。
没有红色的色块显示，说明第14行确实不呈现，那如何让整个图文列表在一个项目都没有时，整个图文列表所在的区域也不显示呢？
回到设计器，将图文列表所在的所有行的行高，全部设置为自适应模式，然后运行。
查看结果，图文列表所在的区域全部都不显示，因为图文列表所在的所有行都是自适应，由于没有项目，所以全部都不显示。
以上就是多行的自适应的示例场景。同理，列宽的自适应也是相同的效果，通常在行高上使用自适应的场景比较常见。
前面讲解了多行的自适应的效果，对于范围模式，也是相同的道理，范围模式就是当浏览器的宽度或者高度方向有剩余空间时，此行/列占据的占比。
我们还是以下面的数据页面为例子，中间部分充满浏览器宽度，是因为在设计器给某列设置了范围模式。
表示运行之后，浏览器显示此页面的所有宽度，如果还有剩余空间，R列将占据剩余空间的1份，由于所有的列中，只有R列设置了占比，所以无论设置的最大值是几，结果都是一样的。
接下来我们做如下修改，我们给A列，最后一列AI列的列宽都设置为范围模式，并且占比为1。
运行之后，查看效果，能看到页面的，左右都留出来了空白区域，这个是因为运行之后，浏览器的宽度显示完所有的列之后，还有剩余，并且将剩余宽度按占比分给A列，R列以及AI列，尤其全部设置的占比是1，所以这3列均匀分配剩余宽度，得到以下的效果。
