windows开始菜单磁贴应使用grid-auto-flow: dense而非grid-template-columns，以实现不规则尺寸与自动填空；配合grid-column/grid-row手动定位，并用minmax()与auto-fill实现自适应列数，再通过媒体查询重写定位规则确保响应式秩序。
磁贴布局用 grid-template-columns 还是 grid-auto-flow？
Windows 开始菜单磁贴的核心是「不规则尺寸 + 自动填充」，不能靠固定列数硬排。用 grid-template-columns: repeat(4, 1fr) 会强制等宽，破坏大中小磁贴的视觉层级。正确做法是启用自动流布局：display: grid + grid-auto-flow: dense，再配合 grid-column 和 grid-row 手动控制每个磁贴占位。
关键点在于：grid-auto-flow: dense 允许后续小磁贴“填空”进前面留下的空隙，否则大磁贴后会留下大片空白。但要注意：它可能打乱 DOM 顺序渲染，若需语义化或可访问性优先，得权衡是否启用。
- 小磁贴（默认）：
grid-column: span 1; grid-row: span 1 - 中磁贴（横向双宽）：
grid-column: span 2; grid-row: span 1 - 大磁贴（2×2）：
grid-column: span 2; grid-row: span 2
怎么让磁贴宽度自适应容器又保持比例？
直接写 width: 200px 会导致在不同屏幕下溢出或留白过多。应使用相对单位 + minmax() 配合 grid-template-columns 的自动列定义：
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
这行代码意思是：每列最小 120px，最大占满可用空间的均分份额，且列数随容器宽度自动增减。实际效果是——窄屏时一列，中屏两列，宽屏四列，同时保证磁贴不会被压扁或撑爆。
注意：minmax(120px, 1fr) 中的 1fr 是上限，不是固定值；auto-fill 会生成尽可能多的列（哪怕内容没填满），而 auto-fit 会收缩空列。开始菜单风格更适合 auto-fill，避免右侧大片留白。
磁贴内图标和文字垂直居中总失败？
常见错误是只给磁贴容器设 display: flex; align-items: center，却忘了磁贴本身高度不固定——Grid 容器里子项默认 stretch 对齐，但若未显式设 height 或 min-height，内部 flex 就没参考基准。
解决方案只有两个有效路径：
- 给磁贴加
min-height: 80px（或根据设计定值），再配合display: flex; flex-direction: column; justify-content: center; align-items: center - 改用 Grid 内部居中：
display: grid; place-items: center; height: 100%，更轻量且无需预设高度
别用 line-height 模拟居中，字体大小变化或换行就会错位；也别依赖 margin: auto，它在 Grid 子项里行为不稳定。
响应式断点下磁贴顺序乱了怎么办？
当屏幕变窄、列数减少时，原本右下角的大磁贴可能被挤到中间，破坏视觉焦点。这不是 Grid 的 bug，而是 grid-column/grid-row 值在不同网格结构下解析结果不同。
解决方法不是删掉定位声明，而是用媒体查询重新分配位置：
@media (max-width: 768px) {
.tile-large { grid-column: span 2; grid-row: span 1; }
.tile-first { grid-column: 1 / -1; grid-row: 1; }
}
重点：用 1 / -1 让首个磁贴横跨全部列，形成顶部通栏入口；把大磁贴降级为横跨两列单行，避免卡在中间。记住，Grid 的响应式本质是「重写定位规则」，不是仅调尺寸。
真正容易被忽略的是：磁贴的 DOM 顺序仍决定键盘 Tab 和屏幕阅读器遍历顺序。如果视觉顺序和 DOM 顺序差异太大，必须用 order 属性微调，而不是只靠 CSS Grid 重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
