Grid 水平分栏

基本用法

默认会水平均分宽度

```schema: scope=”body” [ { “type”: “grid”, “columns”: [ { “columnClassName”: “bg-green-300”, “body”: [ { “type”: “plain”, “text”: “第一栏” } ] }, { “columnClassName”: “bg-blue-300”, “body”: [ { “type”: “plain”, “text”: “第二栏” } ] } ] }, { “type”: “grid”, “className”: “m-t”, “columns”: [ { “columnClassName”: “bg-green-300”, “body”: [ { “type”: “plain”, “text”: “第一栏” } ] }, { “columnClassName”: “bg-blue-300”, “body”: [ { “type”: “plain”, “text”: “第二栏” } ] }, { “columnClassName”: “bg-red-300”, “body”: [ { “type”: “plain”, “text”: “第三栏” } ] } ] } ]

  2. ## 响应式
  4. 通过 `md` 设置屏幕中等宽度（768px）情况下的分栏
  6. ```schema: scope="body"
  7. [
  8.     {
  9.         "type": "grid",
  10.         "className": "b-a bg-dark lter",
  11.         "columns": [
  12.             {
  14.                 "md": 0,
  15.                 "body": [
  16.                     {
  17.                         "type": "plain",
  18.                         "text": "md: 3",
  19.                         "className": "b-r"
  20.                     }
  21.                 ]
  22.             },
  24.             {
  25.                 "md": 9,
  26.                 "body": [
  27.                     {
  28.                         "type": "plain",
  29.                         "text": "md: 9"
  30.                     }
  31.                 ]
  32.             }
  33.         ]
  34.     }
  35. ]

属性表

属性名 类型 默认值 说明
type string "grid" 指定为 Grid 渲染器
className string 外层 Dom 的类名
gap `’xs’ \ ‘sm’ \ ‘base’ \ ‘none’ \ ‘md’ \ ‘lg’` 水平间距
valign `’top’ \ ‘middle’ \ ‘bottom’ \ ‘between’` 垂直对齐方式
align `’left’ \ ‘right’ \ ‘between’ \ ‘center’` 水平对齐方式
columns Array 列集合
columns[x] SchemaNode 成员可以是其他渲染器
columns[x].xs int or “auto” 宽度占比： 1 - 12
columns[x].columnClassName 列类名
columns[x].sm int or “auto” 宽度占比： 1 - 12
columns[x].md int or “auto” 宽度占比： 1 - 12
columns[x].lg int or “auto” 宽度占比： 1 - 12
columns[x].valign `’top’ \ ‘middle’ \ ‘bottom’ \ ‘between’` 当前列内容的垂直对齐

更多使用说明，请参看 Grid Props