本文介绍一种使用 css grid 构建的响应式会议日程表方案，支持桌面端（时间轴垂直、地点横向排列）与移动端（地点垂直、时间轴横向并可水平滚动）双模式切换，并原生支持跨列/跨行的“休息时段”区块布局。
本文介绍一种使用 css grid 构建的响应式会议日程表方案，支持桌面端（时间轴垂直、地点横向排列）与移动端（地点垂直、时间轴横向并可水平滚动）双模式切换，并原生支持跨列/跨行的“休息时段”区块布局。
在组织多场地、多时段的会议或活动时，一个清晰、灵活且适配多设备的日程可视化方案至关重要。传统基于
或浮动布局的实现难以优雅处理“跨地点休息时段”（如茶歇覆盖全部三个会场），而列表式结构（如
+
- ）又缺乏二维空间控制能力。CSS Grid 凭借其显式的行列定义与区域合并能力，成为构建此类动态时间表的理想选择。
以下是一个生产就绪的精简模板，核心逻辑如下：
- 使用 grid-area 精确定义每个区块在网格中的起止行列；
- 通过 @media 查询区分横屏（桌面）与竖屏（移动）布局，避免依赖 orientation（该属性在桌面浏览器中不可靠）；
- 移动端启用水平滚动（overflow-x: auto），确保窄屏下完整内容可见；
- 所有区块均采用语义化 ID，并支持无障碍标签（建议后续补充 aria-label 和 role=”region”）。
✅ 完整 HTML + CSS 示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>会议日程表</title> <style> * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.5; } #timetable { display: grid; width: 100vw; min-height: 100vh; padding: 1rem; gap: 0.75rem; /* 默认为移动端布局：地点在左，时间在上 */ grid-template-rows: repeat(3, 1fr); /* 3 地点行 */ grid-template-columns: 8rem repeat(12, 1fr); /* 第一列为地点，后12列为时间槽（如每30min一格） */ overflow-x: auto; scroll-behavior: smooth; } /* 桌面端：转为时间在左、地点在上 */ @media (min-width: 768px) { #timetable { grid-template-rows: 3rem repeat(12, 1fr); /* 第一行为时间标题，后12行为时间槽 */ grid-template-columns: 6rem repeat(3, 1fr); /* 第一列为时间，后3列为地点 */ overflow-x: visible; } } /* 公共样式 */ .slot { padding: 0.75rem; border-radius: 0.375rem; color: #333; font-weight: 500; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .slot-time, .slot-location { background-color: #f1f5f9; font-size: 0.875rem; font-weight: 600; color: #475569; display: flex; align-items: center; justify-content: center; } /* 示例区块 —— 可按需替换为真实数据 */ #location-a { grid-area: 2 / 1 / 3 / 2; background-color: #e0f2fe; } #location-b { grid-area: 3 / 1 / 4 / 2; background-color: #dbeafe; } #location-c { grid-area: 4 / 1 / 5 / 2; background-color: #f0fdf4; } #time-0900 { grid-area: 1 / 2 / 2 / 3; background-color: #f1f5f9; } #time-0930 { grid-area: 1 / 3 / 2 / 4; background-color: #f1f5f9; } #time-1000 { grid-area: 1 / 4 / 2 / 5; background-color: #f1f5f9; } #talk-1 { grid-area: 2 / 2 / 3 / 4; background-color: #bfdbfe; } #talk-2 { grid-area: 3 / 3 / 4 / 5; background-color: #c7d2fe; } #lunch { grid-area: 2 / 4 / 4 / 5; background-color: #fcd34d; } /* 跨2地点 */ #keynote { grid-area: 2 / 5 / 5 / 6; background-color: #a78bfa; } /* 跨3地点 */ /* 桌面端重定位 */ @media (min-width: 768px) { #location-a { grid-area: 1 / 2 / 2 / 3; background-color: #e0f2fe; } #location-b { grid-area: 1 / 3 / 2 / 4; background-color: #dbeafe; } #location-c { grid-area: 1 / 4 / 2 / 5; background-color: #f0fdf4; } #time-0900 { grid-area: 2 / 1 / 3 / 2; background-color: #f1f5f9; } #time-0930 { grid-area: 3 / 1 / 4 / 2; background-color: #f1f5f9; } #time-1000 { grid-area: 4 / 1 / 5 / 2; background-color: #f1f5f9; } #talk-1 { grid-area: 2 / 2 / 3 / 3; background-color: #bfdbfe; } #talk-2 { grid-area: 3 / 3 / 4 / 4; background-color: #c7d2fe; } #lunch { grid-area: 2 / 4 / 4 / 5; background-color: #fcd34d; } /* 跨2时间槽 */ #keynote { grid-area: 2 / 2 / 5 / 5; background-color: #a78bfa; } /* 跨3时间槽 & 3地点 → 实际占满整个区域 */ } </style> </head> <body> <div id="timetable"> <!-- 地点标题（移动端第一列） --> <div id="location-a" class="slot slot-location">主会场 A</div> <div id="location-b" class="slot slot-location">分会场 B</div> <div id="location-c" class="slot slot-location">线上会议室 C</div> <!-- 时间标题（移动端顶部行） --> <div id="time-0900" class="slot slot-time">09:00</div> <div id="time-0930" class="slot slot-time">09:30</div> <div id="time-1000" class="slot slot-time">10:00</div> <div id="time-1030" class="slot slot-time">10:30</div> <div id="time-1100" class="slot slot-time">11:00</div> <!-- 活动区块 --> <div id="talk-1" class="slot">主题演讲：未来趋势</div> <div id="talk-2" class="slot">圆桌讨论：技术实践</div> <div id="lunch" class="slot">午餐 & 交流</div> <div id="keynote" class="slot">重磅主旨演讲</div> </div> </body> </html>
⚠️ 关键注意事项
- 避免 orientation: portrait/landscape 媒体查询：该特性在桌面浏览器中不触发，且平板横竖屏切换时行为不稳定；推荐使用 min-width（如 768px）或 min-height 配合视口单位判断。
- 跨区域合并必须显式声明：Grid 中“跨多列/多行”的区块（如茶歇、主旨演讲）需用 grid-area: r1 / c1 / r2 / c2 明确范围，不能依赖自动流式布局。
- 移动端水平滚动体验优化：
- 添加 scroll-behavior: smooth 提升滑动流畅度；
- 对容器设置 overscroll-behavior-x: contain 可防止滚动穿透到父级；
- 建议为 .slot 添加 flex-shrink: 0 防止内容被压缩。
- 可访问性增强：为每个 .slot 添加 aria-label（如 aria-label=”主会场A，09:00–09:30：主题演讲”），并用
包裹标题区域。
✅ 总结
本方案以 CSS Grid 为核心，摆脱了表格语义束缚与列表布局局限，天然支持二维空间伸缩与区域合并，同时通过媒体查询实现真正的响应式重构——不仅是尺寸适配，更是信息架构的逻辑重组。开发者可基于此模板快速注入真实日程数据（建议配合 JavaScript 动态渲染），并轻松扩展为支持拖拽编辑、实时状态标记、导出 PDF 等高级功能的完整日程系统。