Bento Grid
源自日本文具盒的布局美学，采用不对称、多尺寸的模块化网格来组织内容。不同大小的卡片灵活而富有节奏感，完美适配响应式布局。
📊
数据分析
占据 2x2 的大尺寸卡片，展示核心数据仪表盘与实时统计图表。
📅
日程安排
1x2 纵向卡片，展示今日待办事项与时间轴。
🌤️
天气与位置
2x1 横向卡片，展示当前位置的天气预报与空气质量指数。
/* Bento Grid 核心实现 */
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 200px);
gap: 1.5rem;
}
.bento-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento-item:nth-child(3) { grid-column: span 1; grid-row: span 2; }
.bento-item:nth-child(5) { grid-column: span 2; grid-row: span 1; }
/* 响应式适配 */
@media (max-width: 768px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
}
← 返回索引