Skip to Content
@anker-in/headless-ui 2.0 is released 🎉

Grid

网格组件,支持响应式布局、网格跨度、自适应列数等功能

基本用法

Grid 组件的基本用法示例

基础网格布局

项目 1

第一个网格项目

项目 2

第二个网格项目

项目 3

第三个网格项目

项目 4

第四个网格项目

项目 5

第五个网格项目

项目 6

第六个网格项目

响应式网格

1

响应式项目 1

自适应不同屏幕尺寸

2

响应式项目 2

自适应不同屏幕尺寸

3

响应式项目 3

自适应不同屏幕尺寸

4

响应式项目 4

自适应不同屏幕尺寸

5

响应式项目 5

自适应不同屏幕尺寸

6

响应式项目 6

自适应不同屏幕尺寸

7

响应式项目 7

自适应不同屏幕尺寸

8

响应式项目 8

自适应不同屏幕尺寸

网格跨度

跨 2 列

这个项目占用2列空间

跨 4 列

这个项目占用4列空间,可以放置更多内容

跨 6 列

占用6列空间

跨 6 列

另一个6列项目

跨 12 列(全宽)

这个项目占满整行

产品展示网格

📱
智能手机
最新款智能手机

¥3,999

💻
笔记本电脑
高性能笔记本

¥7,999

智能手表
健康监测手表

¥1,999

🎧
无线耳机
降噪无线耳机

¥999

📟
平板电脑
轻薄平板电脑

¥2,999

🔊
智能音响
智能语音音响

¥599

仪表板网格

¥128,456

总收入

+12% ↗

1,234

新用户

+8% ↗

5,678

订单数

+15% ↗

89.2%

满意度

+2% ↗

销售趋势
过去30天的销售数据

📊 销售趋势图表

最近活动

新订单

张三

2分钟前

用户注册

李四

5分钟前

支付完成

王五

10分钟前

Last updated on