css grid 构建后台统计面板：主容器用 grid-template-columns: 240px 1fr + gap 布局，卡片网格用 auto-fit/minmax 响应式平铺，flex 垂直排列内容并贴底按钮，两级断点适配移动设备。

用 CSS Grid 规划后台数据统计面板的网格卡片，核心是让结构清晰、响应自然、维护简单。别堆嵌套 div，也别靠百分比或 float 硬调。

语义化骨架先立住

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

放标题、时间筛选器、导出按钮

作为主容器，设 `display: grid` 每个指标卡用 `

` 包裹，加 `aria-labelledby` 支持读屏

放更新时间、数据来源说明

主容器用 grid-template-columns 分栏
推荐写法：

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 100vh;
}
header { grid-column: 1 / -1; }
aside { grid-row: 2; }
section.card { grid-column: 2; grid-row: 2; }
footer { grid-column: 1 / -1; grid-row: 3; }

• 1fr 吸收剩余空间，不怕内容撑开或缩窄
• gap 替代 margin，避免外边距合并问题
• 不用 grid-template-areas，改一个名字就得全局同步，协作易出错

卡片网格本身用 auto-fit + minmax
如果指标卡要横向平铺（比如 4 张 KPI 卡并排），在 .card-grid 容器里：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

• 280px 是单卡最小宽度，小屏自动换行
• 1fr 让多列等宽，不需手动算列数
• 所有卡片用 display: flex; flex-direction: column，.card-body 设 flex-grow: 1，操作按钮用 margin-top: auto 贴底

响应式只设两级断点

• ≤768px：侧边栏收起，grid-template-columns: 1fr，用 order: -1 调整视觉顺序，别用 display: none（否则键盘 Tab 会跳步）
• ≤480px：卡片变单列，grid-template-columns: 1fr，字体和内边距适当缩小

卡片内部图片加 object-fit: cover 和 overflow: hidden，标题截两行用 -webkit-line-clamp: 2，文字超长不撑破布局。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！