组件

OneRow / OneCol

OneRow 把宽度等分为 24 份；每个 OneCol 通过 span 指定占用份数（1-24），多个列相加不超过 24 时同行排列，超出自动换行。

import { OneRow, OneCol } from '@geektech/one';

new OneRow({ gutter: [16, 16], children: [
  { component: OneCol, props: { span: 12 }, children: ['12'] },
  { component: OneCol, props: { span: 12 }, children: ['12'] },
]});
new OneRow({ gutter: [16, 16], children: [
  { component: OneCol, props: { span: 8, offset: 8 }, children: ['8 偏移 8'] },
]});
new OneRow({ gutter: [16, 16], children: [
  { component: OneCol, props: { xs: 24, md: 12 }, children: ['响应式'] },
  { component: OneCol, props: { xs: 24, md: 12 }, children: ['响应式'] },
]});

拆分组合

使用不同 span 组合即可实现 12+12、8+8+8、6+18 等常见布局；不传 span 的列按内容自适应宽度。

偏移

offset 让列向右偏移指定栅格数（0-23），常用于在行首留白或制造不对称布局。

响应式断点

OneCol 支持 xs、sm、md、lg、xl、xxl 六档断点，每档可传数字（仅 span）或 { span, offset } 对象。小断点的设置会级联继承到更大的断点，直到被显式覆盖。

import { OneRow, OneCol } from '@geektech/one';

new OneRow({
  gutter: [16, 16],
  children: [
    { component: OneCol, props: { xs: 24, md: 12 }, children: ['A'] },
    { component: OneCol, props: { xs: 24, md: 12 }, children: ['B'] },
  ],
});

默认断点：xs < 576px，sm >= 576px，md >= 768px，lg >= 992px，xl >= 1200px，xxl >= 1600px。可通过主题 CSS 变量 --one-grid-breakpoint-sm/md/lg/xl/xxl 自定义。

间距与对齐

gutter 接受像素数值或 [水平, 垂直] 数组；align 控制交叉轴对齐，justify 控制主轴分布，wrap 关闭后列不换行。

API