项目管理页面应以清晰呈现任务状态、责任人和时间线为核心，采用css grid搭建主框架（grid-template-rows/columns定义区域）、flexbox处理卡片内布局，兼顾响应性、可维护性与可访问性。
项目管理页面的核心不是“堆功能”，而是让任务状态、责任人、时间线一眼可辨。用 grid 搭主框架 + flex 做卡片内排版，是目前最可控、最易响应的组合。
用 CSS Grid 划分看板大区域（header / sidebar / main / footer）
别用 float 或 position: absolute 去“拼”整个页面结构——它们会让后续加筛选器、拖拽排序、暗色模式变得异常脆弱。
推荐直接用 display: grid 在 body 或最外层容器上定义四块：
-
grid-template-areas写法直观但难维护，建议改用grid-template-columns和grid-template-rows线性定义 - 例如：侧边栏固定 240px，头部固定 64px，底部固定 48px，中间内容区自适应：
grid-template-rows: 64px 1fr 48px+grid-template-columns: 240px 1fr - 注意设置
min-height: 100vh，否则内容少时 footer 会悬浮在半空 - IE11 不支持
grid？那就 fallback 到display: flex; flex-direction: column，别硬套前缀
用 Flexbox 排列 Kanban 列（todo / in-progress / done）
Kanban 看板本质是一行多列的水平滚动容器，每列内部是垂直堆叠的任务卡——这正是 flex-direction: column 的典型场景。
关键点：
- 列容器设
display: flex; flex-direction: column; min-width: 320px（防缩太窄） - 每张任务卡设
flex: 0 0 auto，避免被拉伸变形 - 列容器加
gap: 8px控制卡片间距，比用margin-bottom更可靠（无 margin 合并问题） - 长文本溢出？必须给卡片加
min-width: 0，否则flex默认不截断，overflow: hidden失效
任务卡片内部用 inline-flex 或嵌套 flex 对齐元素
一张卡片里通常有标题、负责人头像、截止日期、标签、操作按钮——它们不是简单堆叠，需要右对齐、基线对齐或等高排列。
常见写法：
- 标题左对齐、操作按钮右对齐：用
display: flex; justify-content: space-between - 头像 + 文字垂直居中：父容器
display: inline-flex; align-items: center - 多个标签横向流式排列且自动换行：
display: flex; flex-wrap: wrap; gap: 4px - 避免给卡片整体设
height，让它由内容撑开；如需统一高度，用min-height+align-items: flex-start
拖拽排序时 layout shift 怎么稳住？
拖动卡片过程中，其他卡片位置乱跳，是因为浏览器重排（reflow）触发了布局抖动。这不是 JS 逻辑问题，而是 CSS 层面没锁住空间。
实操要点：
- 给每列容器加
scroll-margin-top: 64px（配合scroll-behavior: smooth），让滚动锚点更准 - 拖拽中临时给被拖元素加
position: fixed，但必须同步计算inset值，否则脱离视口 - 更稳妥的做法：拖拽开始时，用
getBoundingClientRect()记录所有卡片位置，插入占位div占住原 slot，防止其他项上移 - 别依赖
will-change: transform做优化——它在低端设备上反而加重 GPU 负担
真正容易被忽略的是语义化和可访问性：用 main 包裹看板主体，每列用 section + aria-label，每张卡片用 article，拖拽操作必须提供键盘支持（Enter 开始、方向键移动、Space 放下）。视觉上再酷，屏幕阅读器读出来是一团乱码，就等于没做布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
