基本用法
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