网格

不给 columns 时，网格会在空间允许的范围内尽量多排几条不小于 min 的轨道，剩下的宽度由它们平分。卡片列表要的正是这种行为，而且完全不需要断点：把这个页面拉大缩小，下面的示例自己就会重排。

自动适配

默认行为。每条轨道至少 16rem 宽。

路由

数据加载

资源

图片

区块

搜索

grid(
  ...['路由', '数据加载', '资源', '图片', '区块', '搜索'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

轨道宽度

min 决定一条轨道能窄到什么程度，再窄网格就会减少列数。设得越小，列数越多。

sm

md

lg

xl

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

固定列数

当列数不该随视口变化时，直接传一个数字。每条轨道均分宽度。

一

二

三

grid({ columns: 3 },
  ...['一', '二', '三'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

自定义模板

传字符串时会原样交给 grid-template-columns，可以做侧栏加正文的划分，或者任何 CSS grid 表达得出来的排布。

侧栏

正文，占据这一行剩下的部分。

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, '侧栏'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, '正文，占据这一行剩下的部分。'))),
)

间距与对齐

短的

一张更高的卡片，写了两行文字，用来展示 align 会怎样影响旁边那些更矮的卡片。

短的

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, '短的'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, '一张更高的卡片，写了两行文字，用来展示 align 会怎样影响旁边那些更矮的卡片。'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, '短的'))),
)

属性

属性类型默认值说明
columnsnumber | string—固定轨道数量，或原始的 grid-template-columns 值。省略则自动适配。
minstring'16rem'自动适配时轨道的最小宽度。
gapSpace'md'轨道之间和行之间的间距。
alignstring'stretch'任意 align-items 值。
asstring'div'渲染成哪个元素。

即使 min 大于可用空间，轨道也绝不会宽过网格本身——所以 16rem 的最小值不会在 320px 的手机上撑出横向滚动条。