跳到正文
raft-ui
EN

Grid 栅格

Grid 把 GridItem 排进等宽的 CSS 栅格里。列数、间距、跨度和偏移都可以随宽度变化，这个宽度可以是栅格自己的，也可以是视口的。切换全交给 CSS（容器查询和媒体查询）完成，所以第一次绘制时布局就是对的，不需要测量，也不会跳动。它只负责布局，自己不画任何东西。

演示

基础用法

cols 设置列数，每个元素默认占一列。

1
2
3
4
5
6

间距

xGap 和 yGap 可以是主题预设（small、medium、large），也可以是一个数字（单位 px）。默认没有间距。

xGap="small" yGap="small"

1
2
3
4
5
6
7
8

xGap="large" yGap="large"

1
2
3
4
5
6
7
8

xGap={24} yGap={4}

1
2
3
4
5
6
7
8

跨度与偏移

span 是元素占几列，offset 是它前面空出几列。

span 6
span 2
span 4
offset 1, span 2
offset 1, span 2
offset 2, span 3

响应式列数

响应式的值按宽度列出取值："1 s:2 m:3" 表示默认 1 列，从断点 s 起 2 列，从 m 起 3 列。宽度也可以直接写 px："1 360:2 520:3"。responsive="self"（默认）时看栅格自己的宽度，同一个栅格放在侧栏或主栏里都合适；设为 "screen" 时看视口宽度。cols、xGap、yGap、span 和 offset 都支持这种写法。

responsive="self" cols="1 360:2 520:3" · drag the corner to resize

1
2
3
4
5
6

responsive="screen" cols="2 s:3 m:4 l:6" · resize the window

1
2
3
4
5
6

响应式元素

span 为 0 的元素会被隐藏，所以用响应式的 span 可以在栅格较窄时去掉某个元素。拖动右下角试试。

cols={4} · drag the corner: the first item is hidden below 360px

span="0 360:1 520:2"
span="4 360:3 520:2"

折叠

collapsed 只保留前 collapsedRows 行元素。最后一个元素设置 suffix 后，会固定在最后一行的末尾，并且始终显示；它的子元素写成函数时，能拿到是否有元素被藏起来，很适合给筛选表单放一个“展开”按钮。

1
2
3
4
5
6
7
8
9
Some items are hidden

断点

名称最小宽度
xs0
s640px
m1024px
l1280px
xl1536px
xxl1920px

这几个名字是按屏幕宽度定的；放在面板里、按自身宽度响应的栅格，通常直接写 px 更合适。CSS 查询条件里的宽度不能从变量读取，所以栅格会把它用到的容器查询或媒体查询写进一个只作用于自身的 <style>。

Props

Grid Props

名称类型默认值说明版本
colsnumber | string24列数，或者 "1 s:2 m:3"、"1 360:2" 这样的响应式值。未发布
xGapsmall | medium | large | number | string0列间距：主题预设、px 值，或者二者的响应式值。未发布
yGapsmall | medium | large | number | string0行间距，写法同 xGap。未发布
responsiveself | screenself断点看栅格自己的宽度还是视口宽度。未发布
collapsedbooleanfalse只显示前 collapsedRows 行元素，以及 suffix 元素。未发布
collapsedRowsnumber1折叠时保留的行数。未发布
childrenReactNodeundefined里面的 GridItem。未发布

Grid 在栅格外面包了一层 div（responsive="self" 量的就是它的宽度），原生 div 属性和 ref 都落在这层外壳上。它不附带任何 role；如果放的是一组卡片，可以给它加 role="list"，给每个元素加 role="listitem"。

按自身宽度响应的栅格和普通块级元素一样，宽度由所在的位置决定；如果父元素按内容收缩（比如 inline-block，或者没设宽度的 flex 子元素），需要给它一个宽度。只有折叠且带响应式值的栅格才会在 JavaScript 里量宽度，用来判断该藏哪些元素。

GridItem Props

名称类型默认值说明版本
spannumber | string1元素占的列数，为 0 时隐藏。支持响应式值。未发布
offsetnumber | string0元素前面空出的列数。支持响应式值。未发布
suffixbooleanfalse把元素放到所在行的末尾，栅格折叠时也保持显示。只有最后一个元素能作为 suffix，它的 offset 不生效。未发布
childrenReactNode | ({ overflow }) => ReactNodeundefined内容，或者一个函数，参数 overflow 表示折叠后是否有元素被隐藏。未发布

GridItem 要直接放在 Grid 里（放在 fragment 里也可以）：栅格要读取它们的 span 和 offset 来计算折叠。GridItem 渲染一个 div，同样接受原生 div 属性和 ref。

主题间距对应 token --r-grid-gap-small、--r-grid-gap-medium 和 --r-grid-gap-large。