笔记：使用CSS栅格在响应式布局中定位内容。 栅格是用于对表单和页面上的一组相关内容进行可视化分组的容器。
Yeeoffice中的动态栅格布局使CSS栅格在完全可视化的画布上栩栩如生。这使您可以更直接地控制和设置布局和设计。借助动态栅格，您可以在画布的任何位置重新定位项目并调整其大小，从而更快地生成功能强大的响应式布局。
您可以使用动态栅格来创建各种布局。例如，您可以使用它来创建一个表格，当它在较小屏幕的设备上可以轻松地转换为卡片。
您可以在动态栅格的列和行中排列块控件。可以向动态栅格添加任意数量的控件，也可以在动态栅格内部添加另一个动态栅格进行嵌套。
创建一个动态栅格
要创建一个动态栅格，请从控件面板中选择“动态栅格”控件。
标题的显示和折叠
从内容/基础可以设置动态栅格的标题，在文本框中输入标题，您可以通过显示/显示标题的选项设置中打开/关闭来控制标题的显示和隐藏。
可折叠开关，允许用户折叠和展开动态栅格的内容区域。
添加行和列
在显示面板，可以添加行和列。点击行和列设置区域右上角的+添加按钮，即可添加行和列。
复制和删除行和列
请点击每一列或行末尾的复制或删除按钮，可以进行复制或删除操作。
重新排列行和列
将鼠标悬停在您想移动的行或列上，然后拖动出现的手柄，可重新排列行或列的顺序。
调整行和列的尺寸
点击行或列的标题部分，在展开的尺寸面板中为行或列设置一个自定义的尺寸。
- FR单位
网格布局引入了一个长度单位来帮助我们定义网格：FR 单位。FR 单位表示网格容器中可用空间的一小部分。就像百分比或像素单位一样，可以使用它来定义行和列的长度，但是，与固定百分比或像素单位不同的是，FR 单位在调整间隙时会自动计算单元格空间。
宽度值为1FR的列会拉伸或收缩，以填补网格容器中的可用空间。如果增加或删除列，所有具有1FR单位的列都会相应调整。
- Min/Max 设置
设置最小值/最大值可确保行和列不会收缩到超出设定的最小值或扩展到超出设定的最大值。例如，一行的默认高度为 auto，它将扩展或缩小到适应其内容的高度。
如果想让行有一个最小高度，比如200px，你可以把最小值设置为200px，最大值设置为Auto。
这样一来，行的高度可以适应内容的高度，但不会收缩到200px以下。对列也可以做同样的操作。
在尺寸面板的标题中输入值，可以为行或列设置最小/最大值。
- 在动态栅格中设置内容
可以在一个动态栅格中添加其他控件：文本框、图画、图库，也可以是另一个动态栅格。任何添加到栅格中的控件都会成为该栅格的一个子元素。默认情况下，每一个新的栅格子元素都会填满一个单独的网格单元–从左到右填入下一个可用的单元。如果某一行中没有可用的单元格，将会有一个新的行来容纳子元素。
改变栅格中内容的方向
可以通过设置样式面板中方向设置来改变动态栅格子元素的方向，您可以选择默认行设置，即从左到右排列子元素。 或者，将方向设置为列，即从上到下排列子元素。
动态显示规则
当为动态栅格设置动态显示规则时，它会根据所设置的条件和规则产生不同的效果；动态栅格的动态显示规则有隐藏/显示两个值。
动态栅格的布局样式
- 调整行/列之间的间隙
间隙可以用来设置栅格之间的间距，而无需添加外边距或内边距。如果要调整列和行之间的间隙大小，请设置“列间隙”和“行间隙”的值。
- 动态栅格中的对齐方式
样式面板中的元素对齐方式用来设置动态栅格中子元素的对齐方式。
- 内容内边距：设置每个单元格内容的内边距。
- 背景类型：设置动态栅格的背景颜色：填充或渐变。
- 边框类型：设置边框的类型，值有：无/实线/双实线/点线/虚线/凹槽。
- 边框半径：设置边框的圆角。
设置栅格标题样式
- 排版：设置标题的排版：字体、字体大小、粗细、样式、装饰、行高、字间距等。
- 颜色：设置标题的字体颜色。
- 图标颜色：设置标题中折叠图标的颜色。
- 图标大小：设置折叠图标的尺寸。
- 内边距：设置标题的内边距。
- 背景类型：设置标题的背景颜色：填充或渐变。
- 边框类型：设置边框的类型，值有：无/实线/双实线/点线/虚线/凹槽。
- 边框半径：设置边框的圆角。
- 阴影：设置边框的阴影。
高级设置
该控件的高级设置